基于路径的Nginx根切换多个vue应用答案

【问题标题】：Nginx root switch based on path for multiple vue apps基于路径的Nginx根切换多个vue应用
【发布时间】：2019-11-27 22:15:50
【问题描述】：

假设我有 2 个路由 / 和 /first 并且都应该路由到不同的 vue 应用程序。

我的 root 切换工作正常，问题是当您转到 /first 时，vue 应用程序无法加载任何 javascript 文件或 css 文件，因为它们转到 /js 或 /css 而不是 /first/js或/first/css

我拥有的两个位置块非常简单，如下所示：

    location /first {
        alias  /home/first/dist;
        index  index.html index.htm;
    }

    location / {
        alias  /home/second/dist;
        index  index.html index.htm;
    }

js 和 css 文件正常加载，如/js/chunk-vendors.deb8a740.js。我认为它不起作用，因为 nginx 正在剥离响应中的/first，因为如果我将导入更改为/first/js/chunk-vendors.deb8a740.js，应用程序就会加载。

【问题讨论】：

标签： vue.js nginx nginx-location nginx-config

【解决方案1】：

至少我能够为我自己的情况解决这个问题，所以我会分享我最终得到的结果。

我添加了一个包含公共路径的vue.config.js，因此 dist 文件夹中的所有导入都从/js 变成了/first/js

我的案子只需要这些。

module.exports = {
    publicPath: '/first/'
}

【讨论】：