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

时间：2021-08-02 07:30:17|栏目：vue|点击：次

默认情况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.html
 index: path.resolve(__dirname, '../monitor01/index.html'),

 // 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.js中toast用法及使用toast弹框的实例代码

栏目：vue

下一篇：从源码里了解vue中的nextTick的使用

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

本文地址：http://www.codeinn.net/misctech/163560.html

更多vue

vue

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

阅读排行

推荐教程