多页面Vue应用结合Flask与Nginx部署在子路径下无法运行的问题

看起来你遇到的核心问题是Nginx配置里的路径映射逻辑不对，导致服务器找不到Vue应用的静态文件。我来帮你拆解问题并给出具体的解决步骤：

首先得搞懂Nginx里root和alias指令的关键区别：

• 你现在用root /Website/frontend/dist配合location /app1/，Nginx会自动把location的路径拼到root后面，去/Website/frontend/dist/app1/找文件，但你的Vue打包产物是直接放在/Website/frontend/dist下的，根本没有app1子目录，这就是403错误的根源。
• 而alias指令会直接把/app1/的请求映射到指定目录，不会额外拼接路径，这才是子路径部署需要的配置方式。

1. 修正Nginx核心配置 #

把你当前的location /app1/块替换成下面的内容：

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

这里要注意两个细节：

• alias的路径末尾要加/，确保路径拼接不会出错
• try_files的最后一项要写成/app1/index.html，这样Vue的history模式下，路由跳转时Nginx能正确指向入口文件

2. 优化Vue项目配置 #

你已经在router.js里设置了base: '/app1/'，这部分是正确的。但vue.config.js里的配置有点多余（你用的是web部署不是Electron），可以改成更简洁的形式：

module.exports = {
  publicPath: '/app1/'
};

这个配置会让Vue打包后的静态资源自动带上/app1/前缀，避免页面加载时出现资源404的问题。

3. 重新打包并生效配置 #

修改完Vue配置后，重新执行打包命令生成新的dist文件：

npm run build

然后重启Nginx让配置生效：

sudo systemctl restart nginx

4. 后续多应用扩展方案 #

等你要部署app2时，只需要复制类似的配置块即可：

location /app2/ {
    alias /Website/frontend/app2_dist/;
    try_files $uri $uri/ /app2/index.html;
}

同时对应修改app2的router.js的base和vue.config.js的publicPath为/app2/，打包后放到对应的目录就行，完全不会和app1冲突。

现在你可以访问website.com/app1/测试，应该能正常加载Vue应用了，Flask的/status路径也不会受影响~

备注：内容来源于stack exchange，提问作者user2739347