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 开始 ...
随机推荐
- 修改YOLO使其显示自定义类别
基本参考自这篇文章(http://blog.csdn.net/ma3252788/article/details/74659230),主要用来记录下自己遇到的问题 根据@赤战约风 的帖子做如下修改可以 ...
- 2435: [Noi2011]道路修建(树上操作)
2435: [Noi2011]道路修建 题目:传送门 题解: 建完边之后以1为根建树,统计深度和各个点的子树大小(包括自己) 询问的时候:答案=长度*abs(n-深度大的点的子树大小*2) ans+= ...
- NYOJ 16 矩形嵌套【DP】
解题思路:呃,是看的紫书上面的做法,一个矩形和另一个矩形之间的关系就只有两种,(因为它自己是不能嵌套自己的),可嵌套,不可嵌套,是一个二元关系,如果可嵌套的话,则记为1,如果不可嵌套的话则记为0,就可 ...
- 1,http协议的细节部分学习
http协议(80端口)https(443端口) 主要是一直对三次握手模模糊糊,并且抓包的时候不知道那些Accept.User-Agent什么意思,就仔细找课程学了一下. 学习简介: 1,涉及工具(w ...
- ftp 一个账号多个家目录的解决方案
通常,配置ftp时,一个ftp账号只对应一个家目录,不能有多个家目录的情况. 但是,根据公司开发项目的需求,需要做到一个ftp对应多个开发目录.有想过创建软链接的,可是发现通过ftp是访问不了的. 举 ...
- oralce模糊查询之含有通配符
oracle中通配符有 '_'和'%'当like '_ww%'时,会把'_'和'%'当作通配符使用导致查不出含有'_'和'%'的数据.这时用到转译字符 like '\_ww\%' escape '\ ...
- VUE项目axios请求头更改Content-Type
const httpServer = (opts, data) => { const token = localStorage.getItem('token') const PUBLIC = ` ...
- 计算 List 数据的属性值的总和
List<PostRushPretreatmentMember> taskMember = pre.getTaskMember();///成员分配情况 Integer taskOrderN ...
- k8s日志收集配置
容器日志样例 172.101.32.1 - - [03/Jun/2019:17:14:10 +0800] "POST /ajaxVideoQueues!queryAllUser.action ...
- python3爬取全民K歌
Python3爬取全民k歌 环境 python3.5 + requests 1.通过歌曲主页链接爬取 首先打开歌曲主页,打开开发者工具(F12). 选择Network,点击播放,会发现有一个请求返回的 ...