在子目录中部署VueJS App

Question

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

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

我添加了一个基础href：

    <base href="/dist/">

脚本加载，但Webpack创建的所有资产路径都被破坏，图像和字体在指向根目录时不会加载。

有人可以帮忙吗？

Answer 1

假设您使用的是vue-cli中的网络包模板，则需要修改config/index.js中的assetsPublicPath媒体资源 - 请注意build和dev

查看文档中的Handling Static Assets部分以获取更多信息。

更新

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

请注意，该属性名为publicPath

Answer 2

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

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

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

或您想要的任何子目录。

您也可以根据NODE_ENV做出决定。参见docs。

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

更新

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

Answer 3

如果您通过以下方式安装了应用程序

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