Nuxt3用nginx部署到二级目录

有的时候我们需要把我们写的Nuxt3项目部署到域名的二级目录，例如：https://abc.xx.com/abc/目录下。主要就是用nginx进行配置代理转发来实现的，这样可以实现我们同一个域名下可以部署多个Nuxt3独立的项目，只不过端口不同。使用nginx进行配置代理转发即可。

一、Nuxt3前端配置

首先看下Nuxt3的前端部分的配置（nuxt.config.ts）：

//主要就是配置个baseURL（配置成你要部署的二级目录名称）

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  app: {
    baseURL:'/calculator3/',
    head: {
      title: '计算器-小工具',
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
      meta: [
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        {
          hid: 'description',
          name: 'description',
          content: '计算器-小工具',
        },
      ],
      link: [{ rel: 'icon', type: 'image/x-icon', href: './favicon.ico' }],
    }
  },
  modules: [
    '@element-plus/nuxt',
    '@nuxtjs/color-mode'
  ],

  elementPlus: {
    icon: 'ElIcon',
    // importStyle: 'scss',
    // themes: ['dark'],
  },
  colorMode: {
    preference: 'system', // default value of $colorMode.preference
    fallback: 'light', // fallback value if not system preference found
    hid: 'nuxt-color-mode-script',
    globalName: '__NUXT_COLOR_MODE__',
    componentName: 'ColorScheme',
    classPrefix: '',
    classSuffix: '',//-mode
    storageKey: 'nuxt-color-mode'
  }
});

二、Nuxt3打包

运行命令打包项目：

npm run build

三、上传服务器并部署运行

 将打包后的.output目录文件上传到服务器对应二级目录下面。同时将pm2的脚本文件ecosystem.config.js上传。

 ecosystem.config.js内容：

module.exports = {
    apps: [
      {