Webpack 在Vue CLI 3配置中使用相对url时，本地字体路径不正确

我需要在Vue应用程序上设置相对URL，因为该应用程序可以部署到各种设置中

我目前正在使用Vue Cli 3.0.0-beta.6，并修改了

Vue.config.js

文件，以便生产环境使用相对路径

// vue.config.js    
module.exports = {
  lintOnSave: false,
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        output: {
          publicPath: ''
        }
      }
    } else {
      return {
        output: {
          publicPath: '/'
        }
      }
    }
  }
}

但是，当我使用

vue cli service build

进行生产构建时，字体路径会发生更改（我猜是通过网页包更改的），而不是：

http://127.0.0.1:8080/fonts/my-font.ttf

它通过CSS文件夹进行路由

http://127.0.0.1:8080/css/fonts/my-font.ttf

我目前的想法是，在构建prod时，我需要覆盖处理字体的网页配置，但我：

• 不确定这是否是正确的方法
• 我甚至不知道该怎么做
• 厌倦了网页包

---

任何帮助都会非常棒

您应该能够在

vue.config.js

中执行此操作：

chainWebpack: config => {
  config.module.loader('fonts').tap(options => {
    options.name = `../fonts/[name].[hash:8].[ext]`
  }
}

但一般来说，相对路径至少在SPA中是有问题的。例如，如果您打算在历史记录模式下使用vue路由器，您的应用程序将在页面刷新时中断

---

因此，我最好的建议是为每个部署构建一个绝对路径的fresh。

如果设置

baseUrl:“

，它将起作用。vue cli文档还建议不要修改

输出.publicPath

唯一的缺点是css和js文件将存储在根目录中，而不是其各自的css/和js/目录中。但这应该不是问题，您可以在浏览器中直接访问

index.html

文件，所有资产都有正确的路径

---

作为参考，.

我遇到了完全相同的问题，它让我发疯，如果你找到了解决方案，请告诉我们。@simon-我认为这是不可能的。我认为webpack把相对url搞砸了。目前我已经将生产url硬编码到publicPath中，但是一旦我必须部署到新位置，我就会遇到同样的问题