之前直接用的Vue3，后面為了seo，了解到Vue3用SSR渲染很復雜，甚至衍生了出nuxt3這個框架，這個框架在github已經(jīng)有50K star了，也已經(jīng)是個非常成熟的框架了，不過我感覺國內(nèi)的資料也不多，看來國內(nèi)接受新事物的速度依然很慢，大廠估計都自研了，小公司就用老方法PHP啥的。

學習nuxt3最詳細的資料也就是官方文檔，不過，說實話也很不詳細。我研究了幾天，說難其實也不難，說簡單也不簡單，因為整個框架按約定的自動配置的東西非常多，不了解的話，不知道框架的運作機制，都不知道哪些文件該放哪里。
下面根據(jù)實踐經(jīng)驗，記錄一些覺得官方文檔沒詳細介紹，又不那么好理解的東西

nuxt3 的SSR渲染原理

與Vue3傳統(tǒng)渲染對比

Vue3的原始渲染，是單文件組件，渲染的結果是一個html加一個js和css文件等，服務器通過nginx等代理，讓客戶端可以獲取到這個html文件（就跟獲取個普通文件是一樣的），瀏覽器訪問html，從而再次加載js和其他靜態(tài)文件，完全由客戶端去解析js文件。所以服務器不需要nodeJS環(huán)境

優(yōu)勢劣勢就不去對比了，網(wǎng)上很多，這里最大的問題是搜索引擎是不會爬取js里面的內(nèi)容的，所以非常不利于seo。所以需要用到SSR渲染

SSR也就是能把Vue的頁面，在服務器端就給渲染成靜態(tài)的html頁面，它是有網(wǎng)頁的內(nèi)容的，所以搜索引擎的爬蟲能夠直接獲取到里面的內(nèi)容，從而提高了seo，這里的服務器就需要有nodeJS環(huán)境去解析js文件從而渲染頁面

nuxt3渲染機制（個人理解，可能有誤）

但是這里有個問題，頁面的有些數(shù)據(jù)是由后端動態(tài)提供的，所以在渲染頁面前，需要先從后端獲取數(shù)據(jù)。nuxt3解決該問題的辦法，是在客戶端和后端之間，還設置了一層server端：

客戶端<——>server<——>后端

所以，在官方文檔里，看到http請求方式大多是await的同步請求，和之前用axios的異步差異很大，以前都是要在.then()里面去處理后端的數(shù)據(jù)，否則客戶端界面會卡死。而官方文檔就描述的很不詳細，其實它用await userfetch()向后端發(fā)起請求，那些場景都是在server端渲染頁面時去做的，并不是客戶端直接發(fā)起的請求，server把從后端獲取的數(shù)據(jù)直接渲染成靜態(tài)頁面，再返回給客戶端，客戶端無需再次渲染，直接就展示頁面。所以你看官方文檔的代碼老是await 。在真實業(yè)務上的客戶端發(fā)起的http請求，還是要用promise進行異步請求。關于客戶端的http請求，我也做了封裝，感興趣可以看看。

nuxt3框架一些不好理解的點

第三方組件引入

常見的就是引入UI組件，成熟的UI組件，應該都會適配NUXT3的，都會特別說明在NUXT3中如何引入，如何按需自動加載，自動導入等。如果沒有官方適配的UI組件，建議換一個。
但是有時非用不可，也是可以的，就按照普通Vue3的引入方式，比如vite自動導入的（你說官方文檔連vite的自動導入配置都沒說明的，建議馬上換一個），就在nuxt.config.ts的vite下進行配置：

import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { NaiveUiResolver } from "unplugin-vue-components/resolvers";
export default defineNuxtConfig({
	.........其他配置
	// 下面是我引入naiveUI 的配置
    vite: {
        plugins: [
            AutoImport({
                imports: [
                    {
                        "naive-ui": [],
                    },
                ],
            }),
            Components({
                resolvers: [NaiveUiResolver()],
            }),
        ],
    },
});

對，就照著原來的配置方法配置就好（除非官方有專門的nuxt配置說明），不過，有可能那些自動導入，按需導入的功能會失效。

路由

nuxt3的路由也是基于Vue-route封裝的，所以從老項目遷移的時候，還能不換路由方式，但是它又做了封裝，比如<router-view >就沒用了，你得用<NuxtPage />來代替，關鍵它不如<router-view >自由，在嵌套路由上，nuxt限制很多。

nuxt3使用文件路由，根目錄下的pages目錄下的所有.vue文件都會根據(jù)文件名和目錄名自動生成路由。這樣可以省略路由配置，但是卻加了很多限制，特別是嵌套路由。

比如我的頁面是由頂部導航欄+左側(cè)導航欄+中間區(qū)域組成，之前我用個layout組件分區(qū)域，然后<router-view >來切換中間區(qū)域的內(nèi)容即可。但是不能直接用<NuxtPage />來實現(xiàn)。你必須按照他的嵌套路由規(guī)則，來實現(xiàn)嵌套路由，才能實現(xiàn)上面的這種布局。

而nuxt3中，像這種布局需求，需要用到layout組件來實現(xiàn)，如果你只有一種布局，建議直接卸載app.vue 上，這里的內(nèi)容全局應用，也就意味著頂部導航欄始終存在于所有頁面中。至于多種布局的，我還沒研究，建議看官方文檔琢磨下。

總之，nuxt3的路由很死板。剛用很不習慣。不過倒是省了一些代碼

路由中間件

路由中間件也有固定的實現(xiàn)模板，先在根目錄新建文件夾middleware這個文件夾的，然后新建一個route.global.ts文件，帶global后綴的文件，意味著它全局應用，所有路由都會調(diào)用。然后其中的方法：

export default defineNuxtRouteMiddleware((to, from) => {
    if (to.path === "/") {
        return navigateTo("/home/about");
    }
});

對，這個方法的名稱也是固定的，這里的所有幾乎都是固定的，也就是框架的約定，你只要這么寫，他就會自動加載了。再復雜的中間件我也沒去研究了。

狀態(tài)管理（簡單理解為全局變量）

nuxt3框架提供了自帶的狀態(tài)管理模塊useState()，你可以在任何地方像下面這樣定義一個全局變量：const counter = useState<number>('counter', () =>1)
不過我建議在composables目錄下新建一個ts文件來定義和初始化這些全局變量，因為這樣可以避免在初始化前被調(diào)用，并且目錄里的全局變量也會自動加載，所有地方直接使用，無需手動導入：
例如我在composables目錄下新建一個locale.ts文件:

export const useCounter = () => {
    return useState<number>("counter", () => 1);
};

然后，你就可以在其他.vue和 .ts文件中引用該全局變量（無需手動導入useCounter）：

let counter=useCounter().value

或者，你可以直接全局修改它的值：

useCounter().value++ // 任意地方進行全局修改

使用還是很簡單的。所以，我放棄引入pinia了，因為我就是簡簡單單的定義一些全局變量，nuxt3自帶的這個更好用。

靜態(tài)項目構建

nuxt3默認生成的框架就自帶了兩種構建命令：

        "dev": "nuxt dev", // 開發(fā)環(huán)境直接運行
        "build": "nuxt build", // 混合渲染構建
        "generate": "nuxt generate", // 純靜態(tài)構建

nuxt3總體來說支持三種構建方式：

1. 默認的混合渲染構建，對應的也就是SSR，不過它支持自定義配置，哪些頁面靜態(tài)構建，哪些還是走傳統(tǒng)的SPA，我沒深究，但是確實支持對每個頁面的構建方式指定，對應的命令是：nuxt build
2. 第二種是傳統(tǒng)vue3的SPA構建，需要在nuxt.config.ts中配置ssr:false。這樣就進行SPA構建，不過這種方式的話，建議直接使用vue3傳統(tǒng)項目框架來整，然后執(zhí)行nuxt build
3. 第三種就是SSG構建，就是純靜態(tài)頁面，這種構建最有利于seo，且無需server端渲染，是對客戶端和服務端都最友好的方式，缺點就是頁面是純靜態(tài)的，無法根據(jù)數(shù)據(jù)動態(tài)生成。對應的命令是：nuxt generate

我第一次構建挺順利的，說明這個框架挺成熟的，就只遇到一個地方報錯，我原先在pages目錄下創(chuàng)建了個.ts文件，用來寫一些通用的方法，這個文件在SSG構建時是不行的，也就是說pages目錄下不允許有.ts文件。所以我就把這個文件挪到composables目錄下去，就可以了。構建出來的頁面也沒啥問題，都挺好的。整體大小比SPA方式更小。文章來源地址http://www.zghlxwxcb.cn/news/detail-846964.html

到了這里，關于nuxt3使用記錄一：框架摸索的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！