【vue-cli3】关于在vue.config.js做资源路径的配置

前言

今天使用npm run build打包一个项目，然后访问打包文件的index.html发现资源文件都加载失败了。仔细查看之后，发现它们加载的路径不太对。

过程

发现问题之后，就是查了一下，发现有人说在vue.config.js文件中设置publicPath: '././'（这个属性默认的是./）即可。

备注：vue.config.js需要自己在项目根目录下创建，然后在module.exports = {}中添加publicPath即可。

加上之后，打包，确实访问成功了。但是关掉本地服务再重新开启，发现本地服务的资源加载失败了。这就说明，生产环境和开发环境我们需要做一个区别配置，所以根据当前环境来配置即可。具体代码如下：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? "././" : "./"
};

这样处理之后，打包过后也可正常访问，开发环境也可正常访问。

写在最后

关于webpack的配置还是需要认真学一下！不然每次都是查完看别人怎么做，自己也尝试那样做，原理也不清楚，这不太行啊！