Question

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

我目前正在使用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

我目前的想法是，我需要覆盖在构建prod时处理字体的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，您的应用程序将在页面刷新时中断。

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

Answer 2

如果设置baseUrl: ''，它将有效。 vue cli docs还建议不要修改output.publicPath。

唯一的缺点是css和js文件将存储在root dist目录中，而不是存储在各自的css /和js /目录中。但它不应该是一个问题，你可以直接在浏览器中访问index.html文件，所有资产都有正确的路径。

供参考，see the config docs for the baseUrl。

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

2 个答案: