如何解决Vue+Webpack项目中资源路径构建错误的问题？

本文共计274个文字，预计阅读时间需要2分钟。

默认情况下，webpack+vue-cli 打包的css、js等静态资源路径都是绝对的，即static在根目录下。如果部署到带有文件夾目录的项目中，资源路径会出错。

解决方法：在webpack.prod.conf.js中，修改资源路径为相对路径。

默认情况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 webpack build资源相对路径的问题及解决方法的文章就介绍到这了,更多相关vue webpack build资源相对路径内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！