Vuejs webpack前缀静态资产

Question

您好我使用vue-cli和vue init vuetifyjs/webpack-advanced创建了一个Vuetify应用，结果代码为https://github.com/vuetifyjs/webpack-advanced/tree/master/template

我遇到的问题是我的生产应用程序不在服务器的根目录中，而是www.example.com/foo中的子路径。当我运行npm run build时，我的所有静态资源（如图片和字体）都被引用为/static/images/example.png，因此服务器在www.example.com/static/images/example.png而不是{{www.example.com/foo/static/images/example.png中查找它们时找不到它们1}}

如果我更改config/index.js并设置assetsPublicPath: '/foo'并将我的所有引用从/static/...更改为/foo/static/...，那么我的生产服务器会找到我的所有静态资源，但之后会使用我的开发服务器npm run dev无法找到它们，因为它们被引用为localhost:8080/foo/static/images/example.png但由于某种原因它们似乎在localhost:8080/static/images/example.png。

我理想的解决方案就是将引用保留为/ static并告诉webpack或vueloader，npm run build它应该在我的所有资产之前添加/ foo。如果这是不可能的，至少我想知道一种方法，使我的开发和生产环境使用相同的代码，即使它意味着手动/ foo前置我的静态资产网址

谢谢

Answer 1

模板具有内置的此功能，只需在config/dev.env.js和config/prod.env.js中设置不同的值，它们将根据环境覆盖基础值。