英文:

Multi page Vue app combined with Flask and Nginx - can't run in sub path

问题 {#heading}

我正在运行一个多页面的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/

更改为

location /

那么网站可以正常工作。

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

当我没有一个"/"路径时，Nginx错误日志中的错误显示Nginx正在尝试查找文件夹"/usr/share/nginx/html/"。显然，我可以将所有文件从app1复制到那里，网站可以工作。但当我需要扩展到其他应用程序时，这将不起作用。 英文:

I'm running a multi page Vue app, linked with Flask, running on a server with Nginx. I can get this working fine. However, I am going to be running multiple Vue apps on the same server.

I've updated the router.js file:

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

Vue.use(VueRouter)

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

And also the vue.config.js file:

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

And this is a snippet of my nginx config file that is copied here: /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;
       }

As you can see, I'm trying to just get the first app running - but I'm having issues.

In the current nginx config - I can access website.com/status fine, but I'm getting a 403 forbidden error when I try and access website.com/app1 or website.com/app1/

If I change in my nginx config file, from

location /app1/ 
to
location /

Then the site works fine.

However, that's problematic as when I want to introduce app2, I will need to point to another dist directory.

The error in the Nginx error logs when I don't have a "/" path, shows that Nginx is trying to look under the folder "/usr/share/nginx/html/". Obviously, I can copy all my files from app1 there and the site works. But again, thats not going to work when I need to expand to additional apps.

答案1 {#1}

得分: 1

如果有人感兴趣，问题出在vue.config.js文件上，Nginx找不到与app1关联的dist文件夹中的文件。添加这些信息使其正常工作。

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

英文:

If anyone is interested, the issue was the vue.config.js file and that Nginx couldn't find the files in the dist folder linked to app1. Adding this information got it working.

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