默认情况webpack+vue-cli打包的css、js等静态资源路径都是绝对的,即static在根目录下,如果部署到带有文件夹目录的项目中,资源路径就会出错。
如图:
解决方法:
在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引用地址呢?
config文件夹下面的index build: { // template for index: path.resolve(__dirname, '../monitor01/'), // paths assetsroot: path.resolve(__dirname, '../monitor01'), assetssubdirectory: 'static', assetspublicpath: './', ... }
更改图片地址也为相对路径,修改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资源相对路径内容请搜索移动技术网以前的文章或继续浏览下面的相关文章希望大家以后多多支持移动技术网!
如对本文有疑问, 点击进行留言回复!!
Parallels Desktop v15.1.4-47270 商业版下载 Mac安装Windows首选虚拟机
关于LPC824Lite开发板下载程序时提示"Invalid ROM Table"
MySQL 5.7 关于 JSON 类型的子集Key/Value获取方法分享
javascript从入门到跑路-----小文的js学习笔记(19)------- js的垃圾回收机制
网友评论