结合 Flask 和 Nginx 的多页面 Vue 应用 - 无法在子路径中运行

Question

我正在运行一个多页面 Vue 应用程序，与 Flask 链接，在带有 Nginx 的服务器上运行。我可以让这个工作正常。但是，我将在同一服务器上运行多个 Vue 应用程序。

我更新了 router.js 文件：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter)

export default new VueRouter({
    mode: 'history',
    base: '/app1/',
});

还有 vue.config.js 文件：

module.exports = {
  pluginOptions: {
      electronBuilder: {
          builderOptions: {
              publicPath: '/app1/',
          },
      },
  },
};

这是我的 nginx 配置 文件的片段，复制到此处：/etc/nginx/sites-enabled/default

server {
        listen 80;
        server_name website.com;
        error_page  405     =200 $uri;

        include /etc/nginx/mime.types;


        location /app1/ {
                root /Website/frontend/dist;
                try_files $uri $uri/ /index.html;
         }

        location /status {
               include proxy_params;
               proxy_pass http://192.168.1.1:8000;
       }

如您所见，我正在尝试运行第一个应用程序 - 但我遇到了问题。

在当前的 nginx 配置中 - 我可以 访问 website.com/status 很好，但是当我尝试访问 website.com/app1 或 website.com/app1/

时，我收到 403 禁止错误

如果我更改我的 nginx 配置文件，从

location /app1/ 
to
location /

然后网站就可以正常工作了。

但是，这是有问题的，因为当我想引入 app2 时，我需要指向另一个 dist 目录。

当我没有 "/" 路径时，Nginx 错误日志中的错误表明 Nginx 正在尝试在文件夹 "/usr/share/nginx/html/" 下查找。显然，我可以从 app1 复制所有文件，并且该网站可以正常工作。但同样，当我需要扩展到其他应用程序时，这将不起作用。

Answer 1

如果有人感兴趣，问题是

vue.config.js

文件，并且 Nginx 无法在链接到 app1 的 dist 文件夹中找到文件。添加此信息即可正常工作。

module.exports = {
        publicPath: './',
        assetsDir: './',
        outputDir: './dist/app1/',
};