webpack - 在 Vue CLI 3 配置中使用相对 URL 时本地字体路径不正确

Question

我需要在 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 进行生产构建时，字体路径会发生变化(我猜是通过 webpack)，而不是:

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

它通过 CSS 文件夹路由

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

我目前的想法是我需要在构建产品时覆盖处理字体的 webpack 配置，但我是:

• 不确定这是否是正确的方法
• 甚至不知道该怎么做
• 受够了 webpack

任何帮助都会很棒

Answer 1

你应该能够在 vue.config.js 中做到这一点:

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

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

所以我最好的建议是为每个部署重新构建一个绝对路径。