Vuejs webpack 前缀静态资源答案

【问题标题】：Vuejs webpack prefix static assetsVuejs webpack 前缀静态资源
【发布时间】：2017-12-15 14:46:48
【问题描述】：

您好，我使用 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 中查看

如果我更改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 到我的静态资产 url

谢谢

【问题讨论】：

标签： webpack vuejs2 webpack-2 vuetify.js vue-loader

【解决方案1】：

模板内置了这种能力，只需在config/dev.env.js 和config/prod.env.js 中设置不同的值，它们会根据环境覆盖基本值。

【讨论】：

您能详细说明一下吗？正如我所提到的，我的问题不是为 dev 或 prod 设置不同的 assetsPublicPath，问题是我每次想要构建时都必须手动更改所有静态 url
您如何引用组件中的图像？该模板使用 url-loader，它将图像复制到公共文件夹并相应地设置 url。