nuxt3 ts vue3 vue3服务端渲染，从构建到部署，兼容pc 移动端

六、配置页面标题、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等方法

<van-button type="primary" @click="showToast('toast')">button</van-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组件已经可以被自动导入

<el-button type="primary">button</el-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

<template> <el-button class="button"> <slot/> </el-button> </template> <style lang="scss" scoped> @import "pc"; </style>

//pc.scss @import "index";

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

<template> <van-button class="button"> <slot/> </van-button> </template> <style lang="scss" scoped> @import "mobile"; </style>

//mobile.scss @import "index";

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

<template> <ClientOnly> <PcButton v-if="!mobileStore.isMobile"> <slot/> </PcButton> <MobileButton v-else> <slot/> </MobileButton> </ClientOnly> </template> <script lang="ts" setup> const mobileStore = useMobile(); </script>

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

• 修改nuxt.config.ts

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

• 直接使用文件名

<Button>button</Button>

八、构建布局页面Layouts

1. 创建layouts 文件夹

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

2. 创建layouts>default.vue

<template> 一些在所有页面共享的默认布局 <slot /> </template>

//app.vue <template> <NuxtLayout> <NuxtPage/> </NuxtLayout> </template>

3. 创建layouts>custom.vue

<template> <slot name="header"/> 自定义布局 <slot /> </template>

//app.vue <template> <NuxtLayout name="custom"> <NuxtPage/> </NuxtLayout> </template>

//index.vue <template> <Button>button</Button> </template> <script lang="ts" setup> definePageMeta({ layout: "custom", }); </script>

4. 动态改变布局

//index.vue <template> <Button @click="enableCustomLayout">button</Button> </template> <script lang="ts" setup> function enableCustomLayout () { setPageLayout('custom') } definePageMeta({ layout: false, }); </script>

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

//index.vue <template> <NuxtLayout name="custom"> <template #header>重写布局</template> 当前页面 </NuxtLayout> </template> <script lang="ts" setup> definePageMeta({ layout: false, }); </script>

九、服务端目录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<Body> { Header:{}, Body: Body } //请求参数 export interface RequestInterface<params> { 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 <params,responseData>(requestPar:RequestInterface<params>):Promise<responseData> => { 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<Body> { Header:{}, Body: Body } export interface RequestInterface<params>{ url:string, method?: MethodEnum, params?: params } /** * @method useRequest useFetch请求封装 * @param requestPar {RequestInterface} 请求参数 * */ const useRequest = async <params,responseData>(requestPar:RequestInterface<params>):Promise<responseData>=>{ const requestResult:_AsyncData<any, any> = 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}` } } }); 页面：<template> <div>插件：{{ $demo('插件') }}</div> </template> <script lang="ts" setup> const { $demo } = useNuxtApp() </script>

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"); }); });

5. 创建全局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' } } }) })； 页面：<input v-focus/>

十一、创建公共hooks

1. 创建composables目录

Nuxt 3使用composables/目录，将hooks自动导入vue程序

2. 把之前创建的store文件放进去

3. 修改nuxt.config.ts，去除@store配置

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

十二、其他

1. 创建utils目录：存放一些公共函数、或者枚举，会自动导入vue程序；
2. nuxt api
3. 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 升级至最新的版本

4. 多环境配置

• 根目录创建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<any> => { 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`)

十三、项目部署

1. 安装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.confg

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/; } }

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

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

6. 安装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});

7. 运行pm2 start start.js --name projectName