在子目录中部署VueJS App

Question

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

如果在根目录中上传,则所有内容都可以正常呈现,但在子文件夹中,所有链接都会中断.

我添加了一个基本的href:

    <base href="/dist/">

并且脚本加载,但Webpack创建的所有资产路径都被破坏,图像和字体不会加载,因为它们指向根目录.

有人可以帮忙吗？

Answer 1

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

有关详细信息,请查看文档中的处理静态资产部分.

更新:

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.查看文档.

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

UPDATE

如下面的评论中所述,对于Vue CLI 3.3+使用publicPath属性而不是baseUrl.