Vue.js项目无webpack配置文件，需为静态资源路径添加/static前缀

你遇到的是Vue CLI 3项目构建后静态资源路径不匹配的问题——默认生成的路径是/js/xxx.js，但你的服务器期望资源放在/static/js/xxx.js下，导致404。因为Vue CLI 3封装了Webpack配置，所以你看不到传统的webpack.config.js，不过我们可以通过vue.config.js轻松修改这个配置：

步骤1：创建vue.config.js文件 #

在你的vue_app项目根目录（和package.json同级）新建一个名为vue.config.js的文件。

步骤2：配置publicPath #

在这个文件里添加以下内容：

module.exports = {
  publicPath: '/static/'
}

注意：Vue CLI 3.3+版本统一使用publicPath，更早版本的baseUrl已经被废弃，你的CLI版本是3.0.0-beta.6，这个配置同样适用。

步骤3：重新构建项目 #

运行构建命令：

npm run build

现在你再看生成的dist/index.html里的资源路径，应该会变成/static/js/vendor.be88a6a7.js这样的格式，和服务器的路径匹配，就不会出现404错误了。

原理说明 #

Vue CLI 3默认的publicPath是/，这意味着构建后的静态资源会以根目录为基准路径。而你的服务器把静态资源部署在/static/子目录下，所以我们需要修改这个配置项，让所有静态资源的路径都自动加上/static前缀，这样请求就能正确定位到资源了。

内容的提问来源于stack exchange，提问作者Avinash Raj