Nuxt3重构问题总结

一、项目安装

1、检查node版本，建议使用Node.js - v18+
2、使用nvm管理不同版本的node
3、安装nvm - https://github.com/coreybutler/nvm-windows/releases
4、安装指定版本的 node nvm install 18.19.0
5、查看已安装 node nvm ls
6、使用指定版本的 node nvm use 18.19.0
7、创建新的nuxt3项目 npx nuxi@latest init nuxt-demo
8、安装依赖 npm install
9、启动服务 npm run dev

10、配合element-plus、vuex、vue-router使用的完整依赖如下所示：

{
  "name": "nuxt-demo",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.0.10",
    "axios": "^0.21.1",
    "element-plus": "^2.2.27",
    "gsap": "^3.8.0",
    "prismjs": "^1.25.0",
    "vue": "3.2.45",
    "umob": "^0.2.5"
  },
  "devDependencies": {
    "@element-plus/nuxt": "^1.0.6",
    "@nuxt/devtools": "latest",
    "nuxt": "^3.8.0",
    "vite-plugin-prismjs": "^0.0.8",
    "vue": "^3.3.6",
    "vue-router": "^4.2.5",
    "vuex": "^4.0.2"
  }
}

二、Vue-router使用的注意事项

1、无需createRouter和路由配置，直接使用 import { useRoute } from 'vue-router'、const route = useRoute() 即可
2、store内部禁止使用 const route = useRoute(), 不会响应式更新，需放在setup内部。
3、路由全局守卫, middleware 目录下创建 base.global.ts, 内容如下：

export default defineNuxtRouteMiddleware((to, from) => {
	const { name: toName } = to
	const { name: fromName } = from
	console.log(toName, fromName)
})

三、数据获取

1、本地请求代理配置，nuxt.config.ts中的vite部分配置如下所示：

vite: {
    server: { // 本地请求服务器代理
        proxy: {
            '/api': {
                target: 'https://xxxx.com/api',
                changeOrigin: true,
            },
        },
    },
}

2、服务器请求代理配置，nuxt.config.ts中的nitro部分配置如下所示：

nitro: {
    routeRules: { // 服务器请求代理
        '/api/**': {
            proxy: 'https://xxxx.com/api/**',
        },
    },
}

3、数据获取必须在setup内部调用(禁止在store内调用)，useFetch会自动避免客户端重复发起请求，这是nuxt实现ssr的重要方式，具体请求如下：

await Promise.all([
    useFetch('/a/b', {
        query: { id: '01' },
        method: 'get',
    }),
    useFetch('/a/c', {
        query: { id: '02' },
        method: 'get',
    })
])

请求完成之后的数据处理与正常请求一致。若出现 Hydration children mismatch in <div>: server rendered element contains more child nodes than client vdom 警告，这可能是初始化时存在某个判断条件，该条件在服务端渲染和客户端时存在不一样的表现，进而导致服务端水合结果与客户端不一致。如：localStorage的判断、onMounted内的数值初始化等

四、如何在head内注入js代码片段？

nuxt.config.ts中的app部分配置如下所示：

head: {
    script: [{
        children: `window.addEventListener('load', function() {
            if ('serviceWorker' in navigator) {
                navigator.serviceWorker.register('/sw.js')
            }
        })`,
    }],
}

五、路由跳转短暂白屏处理

默认情况下，useFetch会在异步函数解析完成之前使用Vue的Suspense进行页面导航，而Suspense的#fallback默认为空，从而造成白屏现象

1、使用 useLazyFetch 可以忽略此功能在客户端导航时的使用。在这种情况下，需要手动处理加载状态。首先，修改请求方法:

const fetchHandle = async (id) => {
    const { data: response, pending } = await useLazyFetch('/a/b/getById', {
        query: { id },
        method: 'get',
        key: 'getById:' + id,
    })
    return {
        response,
        pending,
    }
}

2、在composables目录下新建 index.ts

export const useLazyFetchHandle = (data: any, res: any, key: string) => {
    const { response, pending } = data
    const { data: prevData } = useNuxtData(key)
    if (response.value) {
        // 服务端渲染的数据处理
        res.value = response.value.data
    }

    const isLoading = computed(() => { // 加载中
        if (prevData.value) {
            return !prevData.value.success && pending.value
        }
        return pending.value
    })
    
    watch(response, (newRes) => {
        // 监听路由跳转请求的数据处理
        res.value = newRes.data
    })

    return isLoading
}

3、组件内部调用

const result = ref({})
const isLoading = useLazyFetchHandle(
    await fetchHandle(id),
    result,
    'getById:' + id,
)

六、部署

1、检查node版本, 若出现报错 [nuxt] [request error] [unhandled] [500] _fetch is not a function 则需升级node

可安装NVM升级node，参考链接 https://blog.csdn.net/xhp312098226/article/details/131247719

2、Ubuntu 18.04 出现GLIBC_2.28 not found，则需升级Ubuntu系统版本

sudo apt update
sudo apt upgrade
sudo apt full-upgrade
sudo apt autoremove
sudo systemctl reboot
sudo apt install update-manager-core
sudo do-release-upgrade -m desktop -d

升级完成后，mysql也将会被升级至mysql 8，需要重新设置root用户密码和权限

3、执行打包命令 npm run build，并生成 .output文件夹
4、使用pm2管理node服务，PM2 是维持一个 Process 执行的管理器，們可以藉由 PM2 來啟動我們的 Nitro Server，当服务崩溃时能自动的重新启动，以维持服务的正常运作，除此之外 PM2 可以启用集群 (Cluster) 的功能结合请求的负载均衡，来让多核心的机器提升资源的利用率和效能

安装pm2 npm install -g pm2

5、在 Nuxt 目录下放入.output文件夹，并创建 ecosystem.config.js 文件，內容如下：

module.exports = {
    apps: [
        {
            name: 'nuxt-demo',
            exec_mode: 'cluster',
            instances: 'max',
            script: './.output/server/index.mjs',
            env: {
                PORT: 3000,
                HOST: '0.0.0.0',
            }
        }
    ]
}

6、启动服务 pm2 start ecosystem.config.js
7、配置nginx

location / {
    proxy_pass http://127.0.0.1:3000/;
    proxy_set_header HOST $host;
}

七、静态资源404

经排除，问题为以下location导致

location ~ .*.(ttf|woff|webp|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$ {
    expires max;
    if_modified_since off;
    add_header Last-Modified "";
    etag off;
}

调整location匹配规则，过滤_nuxt路径下的静态资源

location ~* ^(?!/(_nuxt|favicon))(.+).(ttf|woff|webp|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$ {
    expires max;
    if_modified_since off;
    add_header Last-Modified "";
    etag off;
}

References

[1] Nuxt3文档

[2] https://github.com/element-plus/element-plus-nuxt-starter

[3] Nuxt 3 学习笔记