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 开始 ...
随机推荐
- Default Document <defaultDocument> IIS中的默认页面
https://docs.microsoft.com/en-us/iis/configuration/system.webserver/defaultdocument/index Default do ...
- m_Orchestrate learning system---十一、thinkphp查看临时文件的好处是什么
m_Orchestrate learning system---十一.thinkphp查看临时文件的好处是什么 一.总结 一句话总结:可以知道thinkphp的标签被smarty引擎翻译而来的php代 ...
- CentOS7安装EPEL的两种方式
转自:http://www.mamicode.com/info-detail-1671603.html epel是社区强烈打造的免费开源发行软件包版本库. EPEL,即Extra Packages f ...
- MySQL学习(六)——自定义连接池
1.连接池概念 用池来管理Connection,这样可以重复使用Connection.有了池,我们就不用自己来创建Connection,而是通过池来获取Connection对象.当使用完Connect ...
- 「JavaSE 重新出发」02.01 基本数据类型
基本数据类型 1. 整型 注意:Java 没有任何无符号(unsigned)形式的 int.long.short 或 byte 类型. 不同进制的表示形式: 十六进制数值有一个前缀0x或0X(如0xC ...
- HDU 1856 More is better【并查集】
解题思路:将给出的男孩的关系合并后,另用一个数组a记录以find(i)为根节点的元素的个数,最后找出数组a的最大值 More is better Time Limit: 5000/1000 MS (J ...
- vmware workstation中的NAT配置
宿主机:win10: IP:192.168.1.101 GW:192.168.1.1 以太网2(VMNET8) IP:192.168.100.1 GW:nonevmware中的虚拟网络设置(NAT): ...
- pyinstall 常见错误
字符编码错误: https://blog.csdn.net/weixin_42426496/article/details/81102665 https://blog.csdn.net/qq_4206 ...
- 学习参考:《Python语言及其应用》中文PDF+英文PDF+代码
学习简单的数据类型,以及基本的数学和文本操作,学习用Python内置的数据结构来处理数据: 掌握Python的代码结构和函数的用法:使用模块和包编写大规模Python程序:深入理解对象.类和其他面向对 ...
- centeros 7开机自动挂载磁盘
场景: 使用mount命令将新发现的磁盘/dev/sdb挂载给/liu后,但是重启后又看不到磁盘? 问题导致原因: 虽然我们可以使用mount命令去挂载磁盘,但是此操作只对服务器运行期间有效,也就是临 ...