webpack - 在子目录中部署 VueJS App

Question

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

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

我添加了一个基本 href:

    <base href="/dist/">

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

有人可以帮忙吗？

Answer 1

对于 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。