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 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
JQuery 获得绝对,相对位置的坐标方法
Feb 09 Javascript
Web开发之JavaScript
Mar 29 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
vue自定义右键菜单之全局实现
Apr 09 Vue.js
微信小程序学习总结(一)项目创建与目录结构分析
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
为查询结果建立向后/向前按钮
2006/10/09 PHP
php木马攻击防御之道
2008/03/24 PHP
PHP 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
php实现的短网址算法分享
2014/06/20 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
Django用户认证系统 User对象解析
2019/08/02 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
保险专业自荐信范文
2014/02/20 职场文书
考研英语复习计划
2015/01/19 职场文书
调任通知
2015/04/21 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang
Redis唯一ID生成器的实现
2022/07/07 Redis