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单例模式的两种方案
Oct 22 Javascript
提取字符串中年月日的函数代码
Nov 05 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
javascript 常见功能汇总
Jun 11 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
vue设置动态请求地址的例子
Nov 01 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 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入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
php中文字符串截取方法实例总结
2014/09/30 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
javascript中的new使用
2010/03/20 Javascript
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
python正则表达式之对号入座篇
2018/07/24 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
个人实用简单的自我评价
2013/10/19 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
教师师德考核自我评价
2014/09/13 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers
GPU服务器的多用户配置方法
2022/07/07 Servers
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android