在子目录中部署 VueJS App答案

【问题标题】：Deploy VueJS App in a subdirectory在子目录中部署 VueJS App
【发布时间】：2017-10-08 07:57:20
【问题描述】：

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

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

我添加了一个基本的 href：

    <base href="/dist/">

脚本会加载，但 Webpack 创建的所有资产路径都已损坏，图像和字体无法加载，因为它们指向根目录。

有人可以帮忙吗？

【问题讨论】：

【解决方案1】：

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

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

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

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

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

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

更新

如下面的 cmets 所述，对于 Vue CLI 3.3+，使用 publicPath 属性而不是 baseUrl。

【讨论】：

【解决方案2】：

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

查看文档中的Handling Static Assets 部分了解更多信息。

更新：

请注意，该属性仅称为 publicPath

【讨论】：

【解决方案3】：

如果您安装了您的应用程序

npm install -g @vue/cli vue ui 那么您应该在顶部项目文件夹（package.json 所在的位置）中创建文件 vue.config.js 并像上面一样粘贴。

【讨论】：