解决vue打包后静态资源路径错误的问题
vue项目完成的最后一步就是打包部署上线,但是打包部署的过程往往不是那么一帆风顺的,现将遇到问题和解决方案记录如下。
图片路径问题
起因:
页面中引入资源的方式往往有如下几种
* HTML标签中直接引入图片, 如 <img src="../assets/images/index.png">
* JS代码中定义资源路径属性,如src: require('../assets/images/index.png')
* CSS代码中定义资源为背景图片,如background-image: url("../assets/images/indexpng")
上述三种资源加载方式还是有所区别的。
前两种无论图片大小,都会使用url-loader加载器将其转化为base64编码的静态资源,而第三种方式则会根据webpack中配置的limit参数,动态选择符合大小要求的图片进行转码,此时则会导致不符合大小选择的图片加载失败,同时报出如下错误。localhost:8080/dist/static/css/static/img/index.254207f.png
解决:
1.保证打包资源路径可用,首先要做的是配置build.js执行时的资源参数,打开config目录下的index.js
看代码:
index: path.resolve(__dirname, '../dist/index.html'),assetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: './', // 修改为'./'满足资源相对路径
2.保证资源转码条件符合。这块主要涉及到加载用到的加载器url-loader, 需要保证其配置可执行。打开build目录下的webpack.base.conf.js
看代码:
{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000, // 该限制为小于10KB的图片,系统默认转码为base64name: utils.assetsPath('img/[name].[hash:7].[ext]')}
},
依赖资源路径问题(字体、图标)
起因:
系统采用vue + elementUI,但是发现打包之后的字体文件和图标都不能正常显示,报错如下:
解决:
打开build目录下utils.js,添加路径配置 publicPath: '../../'
,
看代码:
// Extract CSS when that option is specified
// (which is the case during production build)if (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader',publicPath: '../../' // 解决element UI打包后字体文件丢失})} else {return ['vue-style-loader'].concat(loaders)}
}
以上内容,全为个人拙见,如有错误,还望指正。
感谢博文:
https://blog.csdn.net/qq_38543537/article/details/90755830
https://segmentfault.com/q/1010000015012074
解决vue打包后静态资源路径错误的问题相关推荐
- [vue] 怎么解决vue打包后静态资源图片失效的问题?
[vue] 怎么解决vue打包后静态资源图片失效的问题? 上面蛮多回答感觉像开玩笑似的,静态资源图片失效分几种情况. 1.确定线上环境是否在根路径上,配置资源根目录,vue-cli2 和 vue-cl ...
- 解决vue-cli 打包后静态资源路径不对的问题
解决vue-cli 打包后静态资源路径不对的问题 参考文章: (1)解决vue-cli 打包后静态资源路径不对的问题 (2)https://www.cnblogs.com/sifo/p/1008399 ...
- 解决Vue打包后背景图片路径错误问题
1.原因解析 当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run bu ...
- vue修改打包后静态资源路径
使用vue-cli生成的项目,打包方式是直接执行package.json里配置的脚本 npm run build// 这步其实是去执行build下的build.js脚本文件 node build/bu ...
- Vue Cli 打包之后静态资源路径不对的解决方法
Vue Cli 打包之后静态资源路径不对的解决方法 参考文章: (1)Vue Cli 打包之后静态资源路径不对的解决方法 (2)https://www.cnblogs.com/mengyouyouyo ...
- vue上线后图片不显示_解决Vue打包后访问图片/图标不显示的问题
大家可否遇到过 npm run build打包后,项目在线上运行时,资源文件 (图片.图标)不显示 的问题, 接下来,我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件 打开此文件后 ...
- IDEA解决SSM项目的静态资源路径问题:HTML,CSS,JS--详解
IDEA解决SSM项目的静态资源路径问题:HTML,CSS,JS--详解 参考文章: (1)IDEA解决SSM项目的静态资源路径问题:HTML,CSS,JS--详解 (2)https://www.cn ...
- [vue] 怎么修改vue打包后生成文件路径?
[vue] 怎么修改vue打包后生成文件路径? webpack:output.path vue-cli3: outputDir 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一 ...
- 打包后index.html路径错误,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题 2018年05月23日 10:05:35 for_weber 阅读数:14179 Vue项目运行npm run buil ...
最新文章
- 快手数据中台建设实践
- 2!=5 or 0在python中是否正确-Python 中的 or and 运算,看这一篇就够
- jquery 取对象数组下标_JQuery使用index方法获取Jquery对象数组下标的方法
- OpenCV平滑图像Smoothing Images
- QLineEdit学习
- ATS读小文件(内存命中)
- 【经典回放】JavaScript学习详细干货笔记之(三)
- Docker基础(2)——基础操作
- feign扫描_微服务通信之feign的注册、发现过程
- 实用技巧:快速定位Zuul的性能瓶颈
- CodeForces 722C Destroying Array
- 外设、总线、接口概念辨析
- PHP读取txt文件自动分成指定行数
- 苦涩程序员公考上岸之路
- 创建通用 macOS 二进制文件
- python版本切换 for Windows(Anaconda) Linux(pyenv)
- 亮剑java web_为什么《亮剑Java Web 项目开发案例导航》第二个项目运行不了?
- 2022兴福村镇银行人员招聘专项练习题及答案
- NSD Devops day03
- VB.NET读取版本信息
热门文章
- 没有眼睛的街头卖艺人
- [转] 常见WinCE启动失败原因分析
- logstash grok mysql_【Logstash系列】使用Redis并自定义Grok匹配
- postconstruct_@PostConstruct注解,你该好好看看
- qpsk 锁相环_本科毕业设计课题—QPSK相干解调的MATLAB仿真(4)
- Tensorflow 指令加速
- MySQL查询count(*)、count(1)、count(field)的区别收集
- parentNode,parentElement,childNodes,children的区别
- Luogu1443 马的遍历【STL通俗BFS】
- wordpress 显示数学公式 (MathJax-LaTeX)