vue webpack build资源相对路径的问题及解决方法


Posted in Javascript onJune 04, 2020

默认情况webpack+vue-cli打包的css、js等静态资源路径都是绝对的,即static在根目录下,如果部署到带有文件夹目录的项目中,资源路径就会出错。
如图:

vue webpack build资源相对路径的问题及解决方法
vue webpack build资源相对路径的问题及解决方法
vue webpack build资源相对路径的问题及解决方法

解决方法:

在webpack.prod.conf.js中,output中添加或者修改为 publicPath: ‘./';

output: {
 publicPath: './',
 path: config.build.assetsRoot,
 filename: utils.assetsPath('js/[name].[chunkhash].js'),
 chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 },

这是修改了js,css引用地址,那么image引用地址呢?

vue webpack build资源相对路径的问题及解决方法

config文件夹下面的index
 build: {
 // Template for index.html
 index: path.resolve(__dirname, '../monitor01/index.html'),

 // Paths
 assetsRoot: path.resolve(__dirname, '../monitor01'),
 assetsSubDirectory: 'static',
 assetsPublicPath: './',
 ...
 }

vue webpack build资源相对路径的问题及解决方法

更改图片地址也为相对路径,修改build下,utils.js文件.

if (options.extract) {
 return ExtractTextPlugin.extract({
 use: loaders,
 fallback: 'vue-style-loader',
 publicPath: '../../'
 })
 } else {
 return ['vue-style-loader'].concat(loaders)
 }

vue webpack build资源相对路径的问题及解决方法

总结

到此这篇关于vue webpack build资源相对路径的问题及解决方法的文章就介绍到这了,更多相关vue webpack build资源相对路径内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Js动态创建div
Sep 25 Javascript
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
Javascript匿名函数的一种应用 代码封装
Jun 27 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
React四级菜单的实现
Apr 08 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 #Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 #Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 #Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 #jQuery
JavaScript字符和ASCII实现互相转换
Jun 03 #Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 #Javascript
JavaScript监听键盘事件代码实现
Jun 03 #Javascript
You might like
php 如何获取数组第一个值
2013/08/06 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
js三种排序算法分享
2012/08/16 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
python判断字符串是否纯数字的方法
2014/11/19 Python
Python3实现从文件中读取指定行的方法
2015/05/22 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
Python 加密与解密小结
2018/12/06 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
专业求职信撰写要诀
2014/02/18 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
消防安全宣传标语
2014/06/07 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
运动会新闻稿
2015/07/17 职场文书
标枪加油稿
2015/07/22 职场文书
python 对图片进行简单的处理
2021/06/23 Python
vue3获取当前路由地址
2022/02/18 Vue.js