单域名Nginx部署多Vue应用：第二个应用无法运行求助

问题核心 #

部署在samuimall.com下的两个Vue应用中，/pose运行正常，但/smartq访问时出现静态资源500错误，错误表现为请求https://samuimall.com/assets/index.7f6e6985.js失败——这是因为静态资源请求路径未带上子路径前缀，同时Nginx配置规则未适配子应用的路由。

解决步骤 #

1. 修正Vue项目的静态资源路径配置 #

Vue打包时默认会以根路径/作为静态资源的基准路径，导致smartq的资源会请求根目录下的assets文件夹，而非/smartq/assets。需要在Vue项目中设置publicPath：

• 如果是Vue CLI项目，在vue.config.js中添加：

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

• 重新执行打包命令，将生成的dist目录替换到服务器对应路径。

2. 调整Nginx的location配置 #

原配置存在两个问题：alias路径未以斜杠结尾可能导致路径拼接异常；try_files最后指向的/index.html会跳转到根目录的页面，而非smartq子应用的入口。修正后的配置如下：

location /smartq {
    alias /usr/share/nginx/html/samuimall.com/smartq/dist/;
    try_files $uri $uri/ /smartq/index.html;
    index index.html;
}

3. 验证文件权限 #

确保/usr/share/nginx/html/samuimall.com/smartq/dist目录及其下所有文件（包括assets内的资源）的权限允许Nginx进程读取，可执行以下命令修复权限：

chmod -R 755 /usr/share/nginx/html/samuimall.com/smartq/dist
chown -R www-data:www-data /usr/share/nginx/html/samuimall.com/smartq/dist

完成以上操作后，重启Nginx服务即可解决问题。

内容的提问来源于stack exchange，提问作者Nopmd