vue打包后js和css、图片不显示，引用的字体找不到问题
vue打包后js和css、图片不显示，引用的字体找不到问题；图片一般都是背景图片。
一、vue打包出现js和css不显示问题：
1、不使用mode：‘history’
2、使用mode：‘history’手动添加：
dist包不是服务器跟目录，在index.htm里手动给js和css添加dist目录即可/dist/；
3、或者使用mode：‘history’修改配置：
config里面的index.js找到env: require('./prod.env')模块(新版本build: {),将下面的assetsPublicPath: '/' 改成assetsPublicPath: './' 然后将dist放在服务器上就可以运行了，建议使用这种方法，灵活改动少
二、vue打包出现图片不显示，不能加载字体问题：
不出现的图片一般都是背景图片，打包后会发现图片css样式是 background-image: url(static/img/img@2x.c634efc.png) ，
加载路径是 http://域名/跟目录/static/css/static/img/img@2x.c634efc.png，
或者 http://域名/static/css/static/img/img@2x.c634efc.png
打开跟目录发现图片存放在 static/img下面，根本不在static/css/static/img下面所以加载图片失败。
解决办法：
需要单独为 css 配置 publicPath 。
ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api，可以为css单独配置 publicPath 。
对于用 vue-cli 生成的项目，dist 目录结构如下：
dist
├── index.html
└── static
├── css
├── img
└── js
用 ExtractTextWebpackPlugin 的 publicPath 配置就可以。更改工程 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置，重新打包：
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../', // 这里是/static/css/static/img/img@2x.c634efc.png 所以跳出两层../../； 注意配置这一部分，根据目录结构自由调整
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
加上 publicPath: '../../', 配置后重写打包即可。
vue打包后js和css、图片不显示，引用的字体找不到问题的更多相关文章
- 关于vue打包后，访问不到页面和访问不到图片。
vue项目完成打包上线的时候很多人都会碰到静态资源找不到,常见的有两个第一种:js,css路径不对解决办法:打开config/index.js,将其中的assetsPublicPath值改为’./’ ...
- vue打包后空白页问题全记录 （background路径，css js404，jsonp等）；
总结一下vue打包后问题全记录:大部分开发者webpack基本上都是拿来就用的(并没有系统化的研究). 一 >>> 打包之后的静态文件不能直接访问:(例如dist)打包后搭个服务器才 ...
- vue打包后显示空白正确处理方法
vue打包后显示空白正确处理方法是 1.找到配置文件(js与css加载不上) 修改 这样打包处理可以打开但是页面样式会找不到 2.修改(针对css中的图片加载不上) 找到对应的位置加上publicPa ...
- vue打包dist文件时，图片找不到
1.vue打包dist文件时,图片找不到,无法像在本地一样查看 问题描述: 本地代码:<div class="icon"><img :src="'../ ...
- Vue打包后出现一些map文件
Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1,运行 cnpm run build 开始 ...
- webpack学习（六）打包压缩js和css
打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压缩混淆,无需引用额外的插件, 其命令we ...
- VUE 打包后关于 -webkit-box-orient: vertical; 消失，导致多行溢出不管用问题
VUE 打包后 -webkit-box-orient: vertical; 样式消失,导致页面样式爆炸,看了看解决方案,在这里总结一下: 实际上是 optimize-css-assets-webpac ...
- vue打包后运行在本地/非服务器端环境的访问路径
vue打包前的配置: 项目目录下--> config文件夹---> index.js: build: { assetsPublickPath: './', // 设置成相对路径 ...
- vue打包后出现一些map文件的解决方法
Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1.运行 cnpm run build 开始 ...
随机推荐
- [jQuery学习系列六]6-jQuery实际操作小案例
前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...
- 如何在VS 2010中使用 VS2013的解决方案
今天要用VS2010打开VS2013,一直觉得VS2010到VS2012只是界面上扁平化的改变,平台工具集有改变但很大程度上可能向上兼容.在网上搜了一些文章,其中有一篇说到一个观点: 从 ...
- 第1章 PHP快速入门
1.最好使用<?php ?> 即XML风格的PHP标记: 2.echo语句:将传递给其自身的字符串打印到浏览器: 3.注释:①C风格的多行注释/* */ ②C++风格的单行注释// ...
- IT连创业系列：App产品上线后，运营怎么搞？（上）
又是一阵一阵的时光过去了,今夜,码的不是代码,是文字,继续和大伙分享创业的这一路历程. 话说,在突破技术的领域,IT连和IT恋上线后,慢慢走上运营这条路时,发现自己经常容易迷失. 毕竟,做为一名技术型 ...
- Python的字符编码
Python的字符编码 1. Python字符编码简介 1. 1 ASCII Python解释器在加载.py文件的代码时,会对内容进行编码,一般默认为ASCII码.ASCII(American St ...
- socks-proxy---with ssh
socks-proxy---with sshhttps://blog.csdn.net/scien2011/article/details/54562501
- WinForm timer 控件
timer 控件:按用户定义的时间间隔引发的事件 属性: Enabled 是否启用: Interval 事件发生的事件间隔,单位是毫秒 事件只有一个:Tick 事件经过指定的时间间隔发生 打开一个窗口 ...
- LinkedList 底层实现原理
LinkedList的底层实现原理 LinkedList 底层数据结构为双向链表,链表结构,基于一个个链表节点Node 1,Inner Class 内部类 private static class N ...
- flask渲染模板时报错TypeError: 'UnboundField' object is not callable
渲染模板时,访问页面提示TypeError: 'UnboundField' object is not callable 检查代码,发现实例化表单类是,没有加括号:form = NewNoteForm ...
- idea 这样 会快点
最近使用IDEA来开发JAVA应用,对IDEA的界面很有爱,但是缺受不了它的运行速度.每次运行都要编译,所以就有了这边文章 总感觉IDEA的编译速度比eclipse慢,eclipse每次保存都自动 ...