能否将Vue应用作为Nuxt应用网站的子目录？如何实现？

1. 准备各应用的部署文件 #

• Nuxt应用：执行npm run generate生成静态文件（Nuxt3默认输出到.output/public，Nuxt2默认到dist），将该目录下的所有文件放到Nginx的部署目录，比如/var/www/nuxt-app。
• 两个Vue应用：分别在项目根目录执行npm run build，将生成的dist目录内容，分别复制到/var/www/vue-app1和/var/www/vue-app2。

2. 调整Vue应用的基础路径 #

每个Vue项目需要配置对应子路径，避免静态资源加载错误：

• Vue2项目：修改vue.config.js

  module.exports = {
    publicPath: '/folder1/' // 第二个Vue应用改为'/folder2/'
  }
  

• Vue3项目：修改vite.config.js

  export default {
    base: '/folder1/' // 第二个Vue应用改为'/folder2/'
  }
  

修改完成后重新执行npm run build，再同步静态文件到Nginx目录。

3. 配置Nginx站点规则 #

编辑Nginx的站点配置文件（比如/etc/nginx/sites-available/nuxtapp.com），添加以下配置：

server {
    listen 80;
    server_name nuxtapp.com;

    # 处理Nuxt主应用
    location / {
        root /var/www/nuxt-app;
        try_files $uri $uri/ /index.html; # 适配Nuxt单页应用路由
    }

    # 处理第一个Vue应用（folder1路径）
    location /folder1/ {
        alias /var/www/vue-app1/;
        try_files $uri $uri/ /folder1/index.html; # 适配Vue单页应用路由
    }

    # 处理第二个Vue应用（folder2路径）
    location /folder2/ {
        alias /var/www/vue-app2/;
        try_files $uri $uri/ /folder2/index.html;
    }

    # 静态资源缓存优化（可选）
    location ~* \.(js|css|png|jpg|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

如果你的Nuxt是SSR模式（非静态生成），将location /的配置替换为反向代理：

location / {
    proxy_pass http://localhost:3000; # Nuxt默认SSR端口
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

4. 验证配置并重启Nginx #

• 执行nginx -t检查配置语法是否正确。
• 确认无误后，执行systemctl restart nginx重启Nginx服务。

注意事项 #

• 确保Nginx对所有应用目录有读取权限，可执行chown -R www-data:www-data /var/www/设置权限。

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