Vue-cli下打包资源相对路径踩坑

一般来说webpack的配置是js、css等资源都是以绝对路径的形式引用的参考下图中的assetsPublicPath,其路径默认设置为/

现在我的需求是，希望所有资源都以相对路径的形式引入

有两种方式

1、在config文件夹下找到index.js，对assetsPublicPath重新修改路径为./，如下图所示

2、在build文件夹下找到webpack.prod.conf.js,找到output,新增publicPath:'./'即可，如下图所示

通过以上的设置，虽然已经大部分资源引用的路径已经修改为相对路径，但实际上css引用的资源路径还存在问题

因为在webpack中css文件是使用extract-text-webpack-plugin单独进行打包处理

所以需要在build文件夹下找到utils.js，新增publicPath:'../../',如下图所示

现在就可以npm run build进行打包了

转载于:https://juejin.im/post/5c662f32e51d450ac119c1d0