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 相关文章推荐
javascript Base类 包含基本的方法
Jul 22 Javascript
JSON JQUERY模板实现说明
Jul 03 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
Js数组扁平化实现方法代码总汇
Nov 11 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
微信小程序学习总结(一)项目创建与目录结构分析
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 日期加减的类,很不错
2009/10/10 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
如何教少儿学习Python编程
2020/07/10 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
python openpyxl模块的使用详解
2021/02/25 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
数字漫画:comiXology
2020/06/13 全球购物
六十大寿答谢词
2014/01/12 职场文书
学生安全责任书
2014/04/15 职场文书
党员承诺书格式范文
2015/04/28 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
提档介绍信范文
2015/10/22 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python