在子目录中部署 VueJS App

Question

我在部署使用 Webpack CLi 构建的 Vue JS 应用程序时遇到问题。

如果上传到根目录，一切都很好，但在子文件夹中，所有链接都会中断。

我添加了一个基本的href：

     <base href="/dist/">

并且脚本加载，但是 Webpack 创建的所有资产路径都被破坏了，图像和字体没有加载，因为它们指向根目录。

有人可以帮忙吗？

原文由 Harry 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

假设您正在使用来自 vue-cli 的 webpack 模板，您需要编辑 config/index.js 中的 assetsPublicPath 属性 - 注意有一个 build 和 dev

查看文档中的 处理静态资产 部分了解更多信息。

更新：

CLI v3+ 用户的更新链接： https ://cli.vuejs.org/guide/html-and-static-assets.html

请注意，该属性刚刚被称为 publicPath

原文由 Matt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于 Vue CLI 3，它非常简单。

编辑您的 vue.config.js （如果没有，在项目根目录中创建它）并添加以下行：

 module.exports = {
  baseUrl: "./"
};

或者你想要的任何子目录。

您也可以根据 NODE_ENV 来决定。请参阅 文档。

 module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

更新

如以下评论中所述，对于 Vue CLI 3.3+，请使用 publicPath 属性而不是 baseUrl 。

原文由 jedik 发布，翻译遵循 CC BY-SA 4.0 许可协议