6.11、获取数据 | Nuxt 3 - 中文文档
请求数据的方法有：useAsyncData、useLazyAsyncData （useAsyncData+lazy:true）、useFetch、useLazyFetch （useFetch+lazy:true）
pages/req.vue
<template> <div class="container"> <h1>snow</h1> </div> </template> <script setup lang="ts"> const token = useCookie("token"); const useFetchData = await useFetch('https://md.abc.com.cn/m-staff-center/api/v1/role/pageList',{ method: "get", headers: { 'Authorization' : `Bearer ${token.value}` } }) console.log('17useFetchData', useFetchData.data._rawValue) const useAsyncDataData = await useAsyncData('getRoleList', () => $fetch('https://md.abc.com.cn/m-staff-center/api/v1/role/pageList', { method: "get", headers: { 'Authorization' : `Bearer ${token.value}` } })) console.log('24useAsyncDataData', useAsyncDataData.data._rawValue) </script>
数据获取成功：
注：1，这里使用的全路径接口地址请求的数据，没有因为是本地开发出现跨域问题，同时没有配置代理。2、多次尝试配置代理，使用方法包括vite、nitro，均没有成功，网上暂时也没有找到明确的解答。3、如果后续有了代理相关的进展会及时更新。4、既然本地使用全路径没有跨域问题，那么我考虑在封装请求时候使用全局环境变量来拼接不同环境的域名+接口地址。
6.12、封装请求
6.12.1、utils/request.ts
import { ElMessage } from 'element-plus' const fetch = (url: string, options?: any): Promise<any> => { const token = useCookie("token"); const headers = { // headers信息 'Authorization' : `Bearer ${token.value}` } const { public: { baseUrl } } = useRuntimeConfig() const reqUrl = baseUrl + url return new Promise((resolve, reject) => { useFetch(reqUrl, { ...options, headers }).then(({ data }: any) => { const value = data.value if (!data._rawValue) { // 这里处理错误回调 reject(value) }else if(data._rawValue.code !== '0'){ ElMessage({ message: data._rawValue.msg, type: 'error', }) } else { console.log('40data', data._rawValue) resolve(ref(data)) } }).catch((err: any) => { reject(err) }) }) } export default new class Http { get(url: string, params?: any): Promise<any> { return fetch(url, { method: 'get', params }) } post(url: string, params?: any): Promise<any> { return fetch(url, { method: 'post', params }) } put(url: string, body?: any): Promise<any> { return fetch(url, { method: 'put', body }) } delete(url: string, body?: any): Promise<any> { return fetch(url, { method: 'delete', body }) } }
6.12.2、baseUrl
// 参见本文6.13多环境开发 import { loadEnv } from 'vite' runtimeConfig: { // 运行时常量 public: { // 客户端-服务的都能访问 baseUrl: loadEnv(process.argv[process.argv.length-1], './env').VITE_SERVER_NAME } },
6.12.3、utils/api.ts
import Http from '@/utils/request' export const config1 = (params: any) => { return Http.get('/m-staff-center/api/v1/pageList', params) } export const getVideoList = (params: any) => { return Http.post('/m-staff-center/api/v1/getName', params) }
6.12.4、使用
config1('').then((res: any) => { console.log('27', res) }).catch((err: any)=>{ console.log('29', err) }) getVideoList('').then((res: any) => { console.log('51', res) }).catch((err: any)=>{ console.log('54', err) })
经测试，成功。
6.13、多环境开发
生产使用的项目通常会有dev、test、uat、pre、prd等环境，我们需要配置多种开发环境满足企业级开发要求。
6.13.1、根目录创建env目录，创建环境变量文件
文件命名规则 .env.[环境变量名，如dev]
.env.dev文件，其他文件同理
# 请求接口地址 VITE_REQUEST_BASE_URL = '/m-staff-center/api/v1' VITE_SERVER_NAME = 'https://md.abc.com.cn/' # VITE开头的变量才会被暴露出去
6.13.2、package.json
"scripts": { "build": "nuxt build", "dev": "nuxt dev --mode dev", "test": "nuxt dev --mode test", "uat": "nuxt dev --mode uat", "pre": "nuxt dev --mode pre", "prd": "nuxt dev --mode prd", "generate": "nuxt generate", "preview": "nuxt preview", "postinstall": "nuxt prepare" },
6.13.3、nuxt.config.ts
import { loadEnv } from 'vite' console.log('基础服务路径', loadEnv(process.argv[process.argv.length-1], './env').VITE_SERVER_NAME)
多环境配置成功，环境变量可以用于本地代理使用，如本地代理使用环境域名，等。
6.14、服务器部署
| npm run build | 使用“混合渲染模式”创建一个.output目录。 其中包含所有应用程序、服务器和依赖项，可用于生产。 可通过node、pm2等启动后提供WEB服务。 打包成混合渲染程序，常用。 |
打包生成.output |
| npm run generate | 使用“SPA方式预渲染应用程序”的每个路由（启动server对整个程序代码中涉及的URL进行一次服务端和客户端渲染），将结果存储在纯 HTML 文件中，可以部署在任何静态托管服务上。 该命令触发nuxi build带有prerender:true的参数。 打包成SPA客户端渲染程序，常用。 |
打包生成dist |
build：混合渲染模式，node启动项目（或者使用pm2），nginx做代理转发。
node
node ./.output/server/index.mjs
pm2
pm2 start ecosystem.config.js
// 使用pm2，根目录创建ecosystem.config.js module.exports = { apps: [ { name: 'NuxtAppName', exec_mode: 'cluster', instances: 'max', script: './.output/server/index.mjs', } ] }
未测试。
// nginx配置 { listen 80; server_name www.abc.com; // 域名 location / { proxy_pass http://127.0.0.1:3000; // 转发到当前服务器3000端口 } }
已测试，成功。
generate：预渲染模式，生成静态资源，nginx直接启服务。
已测试，成功。
6.15、其他内容
待补充
七、过程记录
7.1、init项目不成功
解1：墙内的同学可能创建不成功，这里推荐一个链接：https://github.com/nuxt/starter
解2：开始使用科学上网的方法也没有下载成功，后来使用了付费科学上网的方法下载成功。下载成功后如图。
7.2、useHead接收参数如下
useHead(meta: Computable<MetaObject>): void interface MetaObject extends Record<string, any> { charset?: string viewport?: string meta?: Array<Record<string, any>> link?: Array<Record<string, any>> style?: Array<Record<string, any>> script?: Array<Record<string, any>> noscript?: Array<Record<string, any>> titleTemplate?: string | ((title: string) => string) title?: string bodyAttrs?: Record<string, any> htmlAttrs?: Record<string, any> }
charset: 指定 HTML 的字元编码，预设为 utf-8。 viewport: 设定网页的可见区域，预设为 width=device-width, initial-scale=1。 meta: 接受一个阵列，阵列中的每个元素，都將会建立一个 <meta> 标记，元素中物件的属性将对应至的属性。 link: 接受一个阵列，阵列中的每个元素，都将会建立一个 <link> 标记，元素中物件的属性将对应至的属性。 style: 接受一个阵列，阵列中的每個元素，都将会建立一个 <style> 标记，元素中物件的属性将对应至的属性。 script: 接受一个阵列，阵列中的每個元素，都将会建立一个 <script> 标记，元素中物件的属性将对应至的属性。 noscript: 接受一个阵列，阵列中的每個元素，都将会建立一个 <noscript> 标记，元素中物件的属性将对应至的属性。 titleTemplage: 接受一個字串或函數，用來动态的设定该页面元件的网页标题。 title: 在页面元件设置静态的网页标题。 bodyAttrs: 接受一个物件，设置网页中标识的属性，物件中的属性将对应至的属性。 htmlAttrs: 接受一个物件，设置网页中标识的属性，物件中的属性将对应至的属性。
理解useHead：相当于设置页面<head>标签内相关内容。
7.3、出现类似包不能解析的问题
解决：
根目录创建 .npmrc 文件
shamefully-hoist = true
删除node_modules，再次执行pnpm install ，解决成功
有些包仅在根目录的node_modules时才有效，可以通过此配置，提升那些不在node_modules根目录的包。
或者执行：
pnpm i --shamefully-hoist
两种方法均测试成功。
7.4、publicPath (nuxt2.X) 等同于 baseURL (nuxt3.0)
Nuxt Configuration Reference · Nuxt
7.4.1、nuxt2.x，nuxt.config.js
build: { publicPath: process.env.PUBLIC_PATH, }
7.4.2、nuxt3，nuxt.config.ts
app: { baseURL: '/m-abc-pc', }
7.4.3、使用场景
使用这一项配置的时候请求资源的地址就会有这个目录，如下图，在服务区部署时候很重要。
7.5、开发环境修改端口
7.6、设置网站 favicon
7.6.1、favicon.ico 文件放在public目录下。
7.6.2、nuxt.config.ts app/head/link下增加相应内容
link: [ { rel: "icon", href: "/favicon.ico", type: 'image/x-icon'}, ],
经过测试，成功。
