nuxt3 + ts + vue3 + axios + vant + element-plus + sass + pinia vue3服务端渲染，从构建到部署，兼容pc+移动端

简介：该教程兼容pc+移动端，如只需一端，可忽略兼容部分教程，根据需要运行的客户端构建项目

1. nuxt3：https://www.nuxt.com.cn/docs/guide/directory-structure/pages
2. vue3：web开发框架 https://cn.vuejs.org/
3. vant官网：ui组件库，https://vant-contrib.gitee.io/vant/#/zh-CN
4. element-plus官网：https://element-plus.gitee.io/zh-CN/

一、构建项目

访问https://codeload.github.com/nuxt/starter/tar.gz/refs/heads/v3，下载压缩报解压到项目下，或者运行npx nuxi@latest init vue_common，之前配置过vue环境的，最好更新下，开发工具webstrom建议用2023

yarn install 安装依赖 
yarn dev -o 启动

二、路由，新建pages文件夹

1. 普通路由 ，每个pages文件下的vue都是一个路由

• 新建index.vue

• 修改app.vue

2. 嵌套路由

• 新建pages>demo.vue

• 新建pages>demo>test>index.vue、pages>demo>test1>index.vue

  //demo>test>index.vue
  
  
  
  浏览器访问：http://localhost:3000/demo/test
  

  //demo>test1>index.vue
  
  
  浏览器访问：http://localhost:3000/demo/test1
  

• 动态路由，创建：pages>dynami[group]>[id].vue

  
  
  浏览器访问：http://localhost:3000/dynamicGroup/123
  

三、根目录下创建静态资源文件 assets

1. 创建font字体文件，可下载阿里字体图标库 ，解压后文件放入font文件下

2. 创建css文件

• 集成sass

  yarn add sass
  

• 创建globalsIndex.scss

  /**
  * 涉及全局px需要在此，定义样式，并在globals引用，用来兼容pc和移动，不用兼容可以直接写在 globals，也可以全局引入@import "globalsIndex"
  */
  
  body{
    font-size: $font_size
  }
  

• 创建globals.scss 全局样式

   /**
  * 涉及px单位的，需要做pc和移动端的兼容；不需要兼容，可去掉此代码；
  */
  
  .pc{
     @import "globalsIndex";
  }
  
  .mobile{
     @import "globalsIndex";
  }
  

• 创建normalize.scss 统一浏览器样式，下载链接：http://nicolasgallagher.com/about-normalize-css/、https://github.com/necolas/normalize.css
• 创建variable.scss全局scss变量

  $font_size: 14px;//基础字体大小
  

• 创建iframe.scss 全局样式导入

  @import "./variable";
  @import "./globals";
  @import "./normalize";
  @import "../font/iconfont.css";
  

• 引入全局scss文件，修改nuxt.config.ts

  export default defineNuxtConfig({
     ...
     css: [
     	"@/assets/css/iframe.scss"
     ],
     vite: {
     	css: {
         	preprocessorOptions: {
             	scss: {
                 	additionalData: '@import "assets/css/variable.scss";',
             	}
        	 }
    	 }
     },
  	...
  })
  

2. 创建image文件

• 配置别名

  export default defineNuxtConfig({
      ...
      alias: {
          "@img": "~assets/image/",
      },
      ...
  })
  

• 使用

四、状态管理器 pinia https://pinia.web3doc.top/introduction.html

1. 安装依赖

yarn add @pinia/nuxt --dev

2. 修改nuxt.config.ts

export default defineNuxtConfig({
   ...
  modules: ["@pinia/nuxt"],  //配置Nuxt3的扩展的库
   ...
})

3. 创建第一个store：useMobile

• 创建store文件

  import { defineStore } from "pinia";
  
  interface StoreInterface {
      stroe: boolean;
  }
  
  const useStroe = defineStore("mobile", {
      state: ():StoreInterface => {
          return {
              stroe: true,
          };
      },
      actions: {
          updateMobile:()=>{
              return {
                  stroe: false
              };
          },
          fetchHomeData:async ()=> {
  
          },
      },
      getters: {
         stroes: state => state.stroe,
      }
  });
  
  export default useStroe
  

• 创建 useMobile，用于判断是哪个客户端（pc，移动）

  import { defineStore } from "pinia";
  
  interface IsMobileInterface {
      isMobile: boolean;
  }
  
  const useMobile = defineStore("mobile", {
      state: ():IsMobileInterface => {
          return {
              isMobile: false,
          };
      }
  });
  
  export default useMobile
  

  import useMobile from "@store/useMobile";
  import {storeToRefs} from "pinia";
  
  const mobileStore = useMobile();//静态值，不可以动态改变
  let {isMobile} = storeToRefs(mobileStore); //可以动态改变，如：点击某个btn，改变值
  
  const changeMobile = () => {
    isMobile.value = true;
  }
  

• 修改app.vue 判断是否是移动端

  //app.vue
  
  
  
  

• 持久化储存 pinia-plugin-persistedstate，只有store变化时，才会储存，app.vue中不会生效

  yarn add @pinia-plugin-persistedstate/nuxt --dev
  

  export default defineNuxtConfig({
      ...
     modules: [  //配置Nuxt3的扩展的库
      "@pinia/nuxt",
      '@pinia-plugin-persistedstate/nuxt',
     ],
      ...
  })
  

  //localStorage
  import { defineStore } from "pinia"
  export const useStore = defineStore('main', {
    state: () => {
      return {
        someState: 'hello pinia',
      }
    },
    persist: {
      storage: persistedState.localStorage,
    },
  })
  
  //sessionStorage
  import { defineStore } from "pinia"
  export const useStore = defineStore('main', {
    state: () => {
      return {
        someState: 'hello pinia',
      }
    },
    persist: {
      storage: persistedState.sessionStorage,
    },
  })
  
  //cookie
  import { defineStore } from "pinia"
  export const useStore = defineStore('main', {
    state: () => {
      return {
        someState: 'hello pinia',
      }
    },
    persist: {
      storage: persistedState.cookiesWithOptions({
        sameSite: 'strict',
      }),
    },
  });
  
  export default defineNuxtConfig({
    ...
    modules: [
      "@pinia/nuxt",
      "@pinia-plugin-persistedstate/nuxt"
    ],
    piniaPersistedstate: {
      cookieOptions: {
        sameSite: "strict",
      },
      storage: "localStorage"//默认储存方式
    },
     ...
  })
  

五、集成postcss

1. 安装依赖

   yarn add postcss-px-to-viewport-8-plugin --dev
   

2. 修改nuxt.config.ts

   export default defineNuxtConfig({
      ...
      postcss: {
          plugins: {
              "postcss-px-to-viewport-8-plugin": {
                  viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度
                  viewportHeight: 912, // 视窗的高度，对应的是我们设计稿的高度
                  unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
                  viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
                  propList: ['*'],
                  selectorBlackList: [/^.pc/],
                  minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
                  mediaQuery: false, // 允许在媒体查询中转换`px`,
                  exclude: [/pc[\s\S]*.vue/,/element-plus/,/elementTheme.scss/], //设置忽略文件，用正则做目录名匹配
              }
          }
      }
      ...
   })
   

六、配置页面标题、icon、meta等

1. 修改nuxt.config.ts

   export default defineNuxtConfig({
       ...
       app: {
           head: {
               title: "项目标题",
               meta: [
                   {name: "description", content: "项目的重点信息描述--" },
                   {name: "keywords", content: "项目关键词" },
                   {name:"applicable-device", content:"pc,mobile"}, // 移动pc适配
               ],
               link: [{
                   rel:"icon",
                   type: "image/x-icon",
                   href:"/new_favicon.ico"
               }],
           }
       }
       ...
   })
   
   

七、集成ui框架

1. 移动端vant，设计尺寸375

• 安装依赖

  yarn add vant
  yarn add @vant/nuxt --dev
  

• 修改nuxt.config.ts

  export default defineNuxtConfig({
    modules: [
      "@vant/nuxt"
    ],
    vant: { /** Options */ }
  })
  

• Vant组件已经可以被自动导入，而且也包括自动导入showDialog、showToast等方法

  button
  

• 自定义主题 新建 vanTheme.scss，主题配置相关变量https://vant-contrib.gitee.io/vant/#/zh-CN/config-provider

  :root:root {
    --van-primary-color: red;
  }
  

  //iframe.scss
  @import "./vanTheme";
  @import "./globals";
  @import "./normalize";
  @import "../font/iconfont.css";
  

2. 集成element plus

• 安装依赖

  yarn add element-plus
  yarn add @element-plus/nuxt --dev
  

• 修改nuxt.config.ts

  export default defineNuxtConfig({
    ...
    modules: [
      "@element-plus/nuxt"
    ],
    elementPlus: { /** Options */ }
    ...
  })
  

• element-plus组件已经可以被自动导入

  button
  

• 自定义主题 新建 elementTheme.scss，主题相关变量配置 node_modules/element-plus/theme-chalk/src/common/var.scss

  :root:root{
    --el-color-primary: green;
  }
  

  //iframe.scss
  @import "./elementTheme";
  @import "./globals";
  @import "./normalize";
  @import "../font/iconfont.css";
  

3.编写兼容pc、移动端组件

• 依次创建components>platform>button
• button文件夹下创建 pcButton.vue、pc.scss

  //pc.scss
  @import "index";
  

• button文件夹下创建 mobileButton.vue、mobile.scss

  //mobile.scss
  @import "index";
  

• button文件夹下创建 button.vue、index.scss

  .button{
    font-size: 14px;
    height: 32px;
    padding: 4px 15px;
    border-radius: 6px;
  }
  

• 修改nuxt.config.ts

  export default defineNuxtConfig({
      ...
      components: [{
          path: '~/components/',
          pathPrefix: false, //只根据名称使用组件
      }],
      ...
  })
  

• 直接使用文件名

  button
  

八、构建布局页面Layouts

1. 创建layouts 文件夹
   布局放在layouts目录中，使用时将通过异步导入自动加载。布局是通过添加到的app.vue，或者手动指定它作为的一个prop，或者在pages页改变它
2. 创建layouts>default.vue

   //app.vue
   
   

3. 创建layouts>custom.vue

   //app.vue
   
   

   //index.vue
   
   
   
   

4. 动态改变布局

   //index.vue
   
   
   
   

5. 在每页的基础上重写布局

   //index.vue
   
   
   

九、服务端目录service

1. server 路由，创建server目录，创建.ts文件，并非.tsx
   server/api中的文件在它们的路由中会自动以/api作为前缀。 对于添加没有/api前缀的服务器路由，可以将它们放到 server/routes目录中，每个文件都应该导出一个用defineEventHandler()定义的默认函数，处理程序可以直接返回JSON数据，一个Promise或使用event.node.res.end()发送响应
2. 创建server>routes>创建routes.ts

   export default defineEventHandler(() => 'service demo')
   
   浏览器：http://localhost:3000/routes
   页面：await useFetch('/routes')
   

3. 创建server>api>demo.ts

   export default defineEventHandler(() => 'service api demo')
   
   浏览器：http://localhost:3000/api/demo
   页面：await useFetch('/api/demo')
   

4. 指定请求方式可以用.get, .post, .put, .delete作为后缀，新建：server>routes>routes.post.ts、server>api>demo.post.ts

   //routes>routes.post.ts
   export default defineEventHandler(() => 'service router post")
   //api>demo.post.ts
   export default defineEventHandler(() => 'service api post")
   
   页面：await useFetch('/routes',{ method: 'post'})
   页面：await useFetch('/api/demo',{ method: 'post'})
   

5. 路由参数，新建：server>routes>par>[name].post.ts、server>api>[name].post.ts，不要在routes根目录下创建带参的server

   //routes>par>[name].post.ts
   import {H3Event，H3EventContext} from "h3";
   export default defineEventHandler((event:H3Event) => {
       let params = event.context.params as H3EventContext;
       return `service router post ${params.name}`
   });
   //api>[name].post.ts
   import {H3Event，H3EventContext} from "h3";
   export default defineEventHandler((event:H3Event) => {
       let params = event.context.params as H3EventContext;
       return `service api post ${params.name}`
   });
   
   页面：await useFetch('par/routerName',{ method: 'post'});
   页面：await useFetch('/routerName',{ method: 'post'});
   

6. 嵌套路由，新建：server>api>slug>[…slug].ts

   import { createRouter, defineEventHandler, useBase } from "h3";
   
   const router = createRouter()
   
   router.get('/slugGet', defineEventHandler(() => 'slugGet'))
   router.post('/slugPost', defineEventHandler(() => 'slugPos'))
   
   export default useBase('/api/slug', router.handler);
   
   浏览器：http://localhost:3000/api/slug/slugGet
   页面：await useFetch('/api/slug/slugGet');
   页面：await useFetch('/api/slug/slugPost',{ method: 'post'});
   

7. 处理body、query、error、设置状态码、runtimeConfig、cookie，以api>[name].post.ts为例子

   import {H3Event, H3EventContext} from "h3";
   
   export default defineEventHandler(async (event:H3Event) => {
       const body = await readBody(event);
       const query = getQuery(event);
       let params = event.context.params as H3EventContext;
       const config = useRuntimeConfig();
       const cookies = parseCookies(event)
       const id = parseInt(params.id) as number;
       // if (!Number.isInteger(id)) {
       //     throw createError({
       //         statusCode: 400,
       //         statusMessage: "错误处理",
       //     })
       // }
       // setResponseStatus(200, '21321')
       return {
           text:`service router post ${params.name}`,
           params,
           body,
           query,
           config,
           cookies
       }
   });
   
   页面：await useFetch('api/apiName',{
       method: 'post',
       body: { test: 'body' },
       query:{ test: 'query' }
   });
   

8. 创建server/middleware，中间件
   中间件处理程序将在每个请求上运行，再运行任何其他服务器路由，以添加或检查标头、记录请求或扩展事件的请求对象，相当于api拦截器

   export default defineEventHandler((event) => {
       console.log('New request: ' + event.node.req.url)
   })
   

9. Nitro：https://nitro.unjs.io/config，服务配置，配置server 存储示例

• 配置server，修改nuxt.config.ts

  //nuxt.config.ts
  
  export default defineNuxtConfig(
      ...   
      nitro: {
          storage: {
              redis: {
                  driver: "redis",
                  port: 3000,
                  host: "localhost",
                  username: "",
                  password: "",
                  db: 0,
                  tls: {}
          }
      }
  }
      ...
  });
  

• 修改api>[name].post.ts

  export default defineEventHandler(async (event) => {
    const body = await readBody(event)
    let params = event.context.params as H3EventContext;
    await useStorage().setItem('redis:Storage', body)
    return `service router post ${params.name}`
  })
  

• 修改api>demo.ts

  export default defineEventHandler(async (event) => {
    const data = await useStorage().getItem('redis:Storage')
    return data
  });
  
   页面：
   const { data: resDataSuccess } = await useFetch('/api/apiName', {
       method: 'post',
       body: { text: 'storage' }
   })
   const { data: resData } = await useFetch('/api/demo')
  
  

10. 集成axios

    yarn add axios
    
    页面：import axios from "axios";
    await axios.post("http://localhost:3000/api/apiName",{ test: 'axios' })
    

11. 封装axios，创建composables>request>useAxiosRequest.ts

    /**
     * @description axios公共请求封装
     * */
    import axios, {AxiosResponse, InternalAxiosRequestConfig} from "axios";
    
    /**
     * @description 定义相关接口或者枚举
     * */
    
    //请求枚举
    export enum MethodEnum {
        Get='GET',
        Post='POST'
    }
    
    //返回结果
    export interface ResponseResultInterface {
        Header:{},
        Body: Body
    }
    
    //请求参数
    export interface RequestInterface {
        url:string,
        params?:params,
        method?:MethodEnum
    }
    
    /**
     * 封装axios
     * */
    
    // 添加请求拦截器
    axios.interceptors.request.use( (config:InternalAxiosRequestConfig)=>{
        return config;
    }, (error)=>{
        return Promise.reject(error);
    });
    
    // 添加响应拦截器
    axios.interceptors.response.use( (response:AxiosResponse) => {
        return response;
    }, (error) => {
        return Promise.reject(error);
    });
    
    /**
     * @method useAxiosRequest axios请求封装
     * @param requestPar { RequestInterface } 请求url
     * @return Promise
     * */
    const useAxiosRequest= async (requestPar:RequestInterface):Promise => {
        const requestResult:AxiosResponse = await axios({
            method: requestPar.method || MethodEnum.Post,
            url: requestPar.url,
            data: requestPar.params
        });
        return requestResult.data as responseData;
    };
    
    
    export default useAxiosRequest;
    
    

12. 封装useFetch，创建composables>request>useRequest.ts

    /**
     * @description  useFetch请求封装
     * */
    import {FetchContext} from "ofetch";
    import {_AsyncData} from "#app/composables/asyncData";
    
    /**
     * @description 定义相关接口或者枚举
     * */
    
    //请求枚举
    export enum MethodEnum {
        Get='GET',
        Post='POST'
    }
    
    //返回结果
    export interface ResponseResultInterface {
        Header:{},
        Body: Body
    }
    
    export interface RequestInterface{
        url:string,
        method?: MethodEnum,
        params?: params
    }
    
    /**
     * @method useRequest useFetch请求封装
     * @param requestPar {RequestInterface} 请求参数
     * */
    
    const useRequest = async (requestPar:RequestInterface):Promise=>{
        const requestResult:_AsyncData = await useFetch(requestPar.url,{
            method:requestPar.method || MethodEnum.Post,
            params:requestPar.params || {},
            //请求拦截
            onRequest(requestOption:FetchContext):void {
                // options.headers = options.headers || {}
            },
            //错误请求拦截
            onRequestError(RequestErrorOption:FetchContext):void {
                // throw createError({
                //     statusCode: 500,
                //     statusMessage: reqUrl,
                //     message: '自己后端接口的报错信息',
                // })
            },
            //响应拦截
            onResponse(ResponseOption:FetchContext):void {
            },
            //响应错误拦截
            onResponseError(responseErrorOption:FetchContext):void {
                // throw createError({
                //     statusCode: 500,
                //     statusMessage: reqUrl,
                //     message: '自己后端接口的报错信息',
                // })
            }
        });
    
        return requestResult.data.value as responseData;
    }
    
    export default useRequest;
    

13. 根据自己喜好选择axios、useFetch，axios属于客户端发送请求受跨域影响，useFetch属于第一次渲染页面为服务端请求无跨域影响、再次返回页面为客户端请求受跨域影响。如果需要同时使用两种，建议把共同的枚举统一放到同一个文件

十、插件plugins

1. 创建plugins目录，创建.ts文件，并非.tsx
   自动plugins目录中的文件，并在创建Vue应用程序时加载它们。可以在文件名中使用.server或.client后缀来只在服务器端或客户端加载插件。
2. 创建plugins>demo.vue

   export default defineNuxtPlugin(nuxtApp => {
       return {
           provide: {
               demo: (msg: string) => `demo ${msg}`
           }
       }
   });
   
   页面：
   
   
   
   

3. 控制插件注册顺序，在文件名上加前加上数字

• 创建plugins>1.demos.ts

  export default defineNuxtPlugin(nuxtApp => {
      return {
          provide: {
              demo1: (msg: string) => `demo1 ${msg}`
          }
      }
  });
  

• 创建plugins>2.demo.ts，2.demo.ts可以使用1.demos.ts
  export default defineNuxtPlugin(nuxtAp => { return { provide: { demo2: (msg: string) => `${nuxtApp.$demo1('demo2')} ${msg}` } } });
  4. 创建监听hook插件，plugins>watchHook.ts

  export default defineNuxtPlugin((nuxtApp) => {
    // 客户端 & 服务端
    nuxtApp.hook("app:created", (vueApp) => {
      console.log("app:created");
    });
    // 服务端
    nuxtApp.hook("app:beforeMount", (vueApp) => {
      console.log("app:beforeMount");
    });
    // 客户端 & 服务端
    nuxtApp.hook("vue:setup", () => {
      console.log("vue:setup");
    });
    // 服务端
    nuxtApp.hook("app:rendered", (renderContext) => {
      console.log("app:rendered");
    });
    // 客户端
    nuxtApp.hook("app:mounted", (vueApp) => {
      console.log("app:mounted");
    });
  });
  

6. 创建全局vue自定义指令，plugins>directive.ts

   import {DirectiveBinding, VNode} from "@vue/runtime-core";
   export default defineNuxtPlugin(nuxtApp => {
      nuxtApp.vueApp.directive('focus', {
          // 在绑定元素的 attribute 或事件监听器被应用之前调用
          created:(el)=>{},
         // 在绑定元素的父组件挂载之前调用
          beforeMount:(el)=>{},
          // 在包含组件的 VNode 更新之前调用
          beforeUpdate:(el)=>{},
          // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
          updated:(el)=>{},
          // 在绑定元素的父组件卸载之前调用
          beforeUnmount:(el)=>{},
          // 卸载绑定元素的父组件时调用
          unmounted:(el)=>{},
          // 绑定元素的父组件被挂载时调用
          mounted:(el)=>{
              el.focus()
          },
          //渲染时向元素添加属性
          getSSRProps:(binding:DirectiveBinding, vnode:VNode) =>{
              return {
                  id:'test'
              }
          }
      })
   })；
   
   页面：
   

十一、创建公共hooks

1. 创建composables目录
   Nuxt 3使用composables/目录，将hooks自动导入vue程序
2. 把之前创建的store文件放进去
   
3. 修改nuxt.config.ts

   export default defineNuxtConfig({
       ...
       imports: {
           dirs: 
               "composables/**"
           ]
       },
       ...
   });
   
   页面使用：const mobileStore = useMobile();//相比之前不需要在import导入
   

十二、其他

1. 创建utils目录：存放一些公共函数、或者枚举，会自动导入vue程序；
2. nuxt常用命令：https://nuxt.com/docs/api/commands/add

• nuxt dev -o -p 3002启动一个热加载的 Web 服务器（开发模式） - localhost:3002，默认端口3000
• nuxt build 利用 webpack 编译应用，压缩 JS 和 CSS 资源（发布用）。
• nuxt start 以生产模式启动一个 Web 服务器 (需要先执行nuxt build)。
• nuxt generate 编译应用，并依据路由配置生成对应的 HTML 文件 (用于静态站点的部署)。
• nuxt preview 在运行build命令后，preview 命令启动一个服务器来预览你的Nuxt应用程序
• nuxt prepare 命令在应用程序中创建一个.nuxt 目录并生成类型
• nuxi cleanup 用来删除 Nuxt 自动产生的文件和缓存
• nuxi upgrade 将目前项目的 Nuxt 3 升级至最新的版本

3. 多环境配置

• 根目录创建env>.env.dev文件

  #开发环境配置
  VITE_HOST=http://127.0.0.1:3000/  #本地请求ip+端口
  VITE_PROXY=http://127.0.0.1  #需要代理的ip
  VITE_PROXY_3002=3002  #需要代理的端口
  

• 修改nuxt.config.ts

  import{loadEnv}from"vite";
   
  /**
  *@description定义env接口*/
  interfaceENV_CONFIG{
      host:string
      host1:string
  }
  const envScript=(process.envasany).npm_lifecycle_script.split('');
  const envName=envScript[envScript.length-1];//通过启动命令区分环境
  const envData=loadEnv(envName,'env') as ENV_CONFIG|unknown;
  
  export default defineNuxtConfig({
      ...
      runtimeConfig: {    
          public: envData // 把env放入这个里面，通过useRuntimeConfig获取
      },
      vite: {    
          envDir: '~/env', // 指定env文件夹    
      },
      ...
  });
  
  页面：const envConfig = useRuntimeConfig();
  package.json配置："dev": "nuxt dev --mode dev",
  

• 服务端代理客户端请求，解决跨域，如：axios、useFetch返回页面后的请求

  import{getRequestHeaders, getRequestURL, H3Event, HTTPMethod} from "h3";
   
  const {public: {
      VITE_PROXY,
      VITE_PROXY_3002
  }} =useRuntimeConfig();
   
  interfaceApiInterface{
      [propName:string]:string
  }
   
  //把已有的ip和端口。组成请求的url
  constapiUrlOption:ApiInterface ={
      3002:`${VITE_PROXY}:${VITE_PROXY_3002}`
  }
   
  //请求路由配置，getArticles是后端提供的api
  constapiRouter:ApiInterface ={
     "/getArticles":`${apiUrlOption["3002"]}/getArticles`
  };
   
  export defaultdefineEventHandler(async (event:H3Event):Promise => {
      const urlInfo:URL = getRequestURL(event);
      const requestUrl:string =apiRouter[urlInfo.pathname];
      if(requestUrl){
          const method:HTTPMethod =getMethod(event);
          // const query:QueryObject =getQuery(event);
          const headers =getRequestHeaders(event);
          const options: any  = {
              responseType: 'json',
          }
          options.headers = headers;
          options.method = method;
          if (method != 'GET') {
              options.body = awaitreadBody(event);
          }
          return await $fetch(requestUrl,options);
      }
  });
  
  页面：const envConfig:RuntimeConfig = useRuntimeConfig();
        await useFetch(`${VITE_HOST}getArticles`)
  

4. 项目部署

• 安装nginx：https://nginx.org/en/download.html，下载合适的版本，解压到任意位置
  • 启动cd到nginx目录运行 nginx.exe
  • 启动cd到nginx目录运行start nginx，访问http://localhost:80 正常访问nginx运行成功
  • 启动cd到nginx目录运行nginx -s reload 重新加载配置
  • 启动cd到nginx目录运行nginx -s stop 停止
  • 启动cd到nginx目录运行nginx -s quit 正常关闭
  • 启动cd到nginx目录运行nginx -s reopen 重新打开
  • 配置nginx.conf

     server {
          listen       9001;
          server_name  localhost;
          # server_name  btyhub.site, www.btyhub.site;
          # ssl两个文件，放在 nginx的conf目录中
          # ssl_certificate      btyhub.site_bundle.pem;
          # ssl_certificate_key  btyhub.site.key;
    
          # ssl_session_cache    shared:SSL:1m;
          # ssl_session_timeout  5m;
    
          # ssl_ciphers  HIGH:!aNULL:!MD5;
          # ssl_prefer_server_ciphers  on;
          # 代理到Next的服务，默认3000端口，也可以在start的时候指定
          location / {
              proxy_pass    http://127.0.0.1:7000/;
          }
    
      }
    

• 安装 pm2，node进程管理工具：npm install -g pm2
• 安装npm install cross-env -g
• 把打包后得.output上传服务器
• package.json

  {
    "name": "nuxt-app",
    "private": true,
    "scripts": {
      "start": "cross-env PORT=7000 HOST=127.0.0.1 node .output/server/index.mjs"
    }
  }
  

• 安装child_process，运行npm install child_process -g 或 yarn add child_process --dev，创建start.js

  let exec = require("child_process").exec;
  exec("yarn start", {windowsHide: true});
  

• 运行pm2 start start.js --name projectName，浏览访问：localhost:9001，需要把env 代理部分改成9001端口，否则请求会出现跨域问题，本地搭建；服务器搭建env直接配置服务器地址