Nuxt 3是一個基于Vue 3的靜態網站生成框架，它提供了高性能、SEO友好的Web應用程序開發體驗。Nuxt 3重寫了許多核心代碼，增加了新功能，如基于Vite的構建系統、改進的路由系統、數據獲取和插件系統。它支持TypeScript和多種渲染模式（CSR、SSG、SSR），提供了更好的性能和更快的加載速度。Nuxt 3是Vue 3生態系統中一個完善且強大的解決方案，適用于需要服務端渲染和SEO優化的項目。
1、使用npx nuxi搭建項目
初始化一個名字為portal的項目
npx nuxi@latest init portal
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
Need to install the following packages:nuxi@latest
Ok to proceed? (y) yWARN Current version of Node.js (16.15.1) is unsupported and might cause issues. Please upgrade to a compatible version >= 18.0.0.ERROR Error: Failed to download template from registry: h is not a function
上面報錯的原因是nodejs版本太低了，使用nuxt3，nodejs的版本最低需要18.0。
npx nuxi@latest init portalERROR Error: Failed to download template from registry: Failed to download https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json: TypeError: fetch failed
網絡連接失敗，需要手動配置一下hosts
打開C:\Windows\System32\drivers\etc\hosts，添加raw.githubusercontent.com與IP的對應關系，我的電腦沒有hosts文件，手動創建了一個，內容如下
185.199.109.133 raw.githubusercontent.com
# 185.199.110.133 raw.githubusercontent.com
# 185.199.111.133 raw.githubusercontent.com
我試了一下配置這個IP是可以的185.199.109.133（查找域名對應的IP可以在 https://sites.ipaddress.com/ 網站查詢）
>npx nuxi@latest init portal> Which package manager would you like to use?
> npm
pnpm
yarn
bun
如果執行命令后是這樣子，就說明成功了，根據自己情況選擇，我選擇了默認的npm安裝。
>node -v
v18.20.3
本次安裝的node版本18.20.3
"dependencies": {"nuxt": "^3.11.2","sass": "^1.77.4","vue": "^3.4.27","vue-router": "^4.3.2"}
新建項目時的nuxt版本3.11.2
2、新建必要目錄
i.默認情況下僅有public和server目錄，我們需要手動創建components、assets和pages目錄
組件的用法請查看文檔： components/ · Nuxt 目錄結構 - Nuxt 中文 (nuxtjs.org.cn)
ii.新建/pages/index.vue
路由無需配置，會根據目錄自動配置好
詳情請看文檔： pages/ · Nuxt 目錄結構
iii.修改app.vue的內容
NuxtPage組件用于顯示位于pages/目錄中的頁面， 它是對 Vue Router 的RouterView 組件的封裝。
<template><div>
<!-- <NuxtWelcome />--><NuxtPage /></div>
</template>
項目運行后訪問 localhost:3000 即可看到index.vue頁面的內容
3、線上部署
i.先執行nuxt build打包
打包結束后會在項目根目錄生成**.output文件夾**，把文件內的內容上傳至服務器（假設為portal目錄）
ii.使用node命令運行項目
項目默認使用3000端口運行
# 當前在portal目錄
ls
nitro.json public server
node server/index.mjs
Listening on http://[::]:3000
可以看到項目在3000端口運行
注意：使用node命令運行的項目會隨著窗口關閉而關閉，如果想要項目在后臺運行需要安裝pm2
iii.使用curl檢測項目是否運行
curl http:// localhost:3000
<!DOCTYPE html><html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
................................
iv.配置nginx讓域名可以訪問網站
在nginx中增加如下配置
server {listen 80;server_name www.xxxx.run;location /{proxy_pass http://localhost:3000; # 反向代理至node服務器}
}
最后執行nginx -s reload 讓配置重載一下
現在可以在瀏覽器使用http:// www.xxxx.run訪問剛才的部署的網站了
4、使用pm2部署
i.線上部署需要安裝pm2程序
PM2是一個Node.js應用程序的生產進程管理器，可以用來啟動、重啟、停止和刪除應用程序。使用npm install pm2 -g進行全局安裝。
pm2 --version
5.4.1
ii.配置ecosystem.config.js
這是一個用于PM2的配置文件，需要放在項目的根目錄下（portal/ecosystem.config.js）。文件中需要指定項目的名稱、執行模式、實例數量以及啟動腳本的路徑等信息。
module.exports = {apps: [{name: 'portal',port: '3000',exec_mode: 'cluster', // 使用集群模式運行instances: 'max', // 根據CPU核心數自動分配實例數script: './server/index.mjs'}]
}
參考： 部署 · Nuxt 入門 - Nuxt 中文 (nuxtjs.org.cn)
iii. 使用PM2啟動項目
在項目的根目錄下執行pm2 start ecosystem.config.js命令，啟動Nuxt3項目。如果一切正常，PM2會顯示項目已經在線（online），并且可以通過指定的端口進行訪問。
pm2 start ecosystem.config.js
[PM2][WARN] Applications portal not running, starting...
[PM2] App [portal] launched (2 instances)
┌────┬────────────────────┬──────────┬──────┬───────────┬──────────┬──────────┐
│ id │ name │ mode │ ? │ status │ cpu │ memory │
├────┼────────────────────┼──────────┼──────┼───────────┼──────────┼──────────┤
│ 0 │ portal │ cluster │ 0 │ online │ 0% │ 43.7mb │
│ 1 │ portal │ cluster │ 0 │ online │ 0% │ 38.0mb │
└────┴────────────────────┴──────────┴──────┴───────────┴──────────┴──────────┘
服務器CPU是兩核，于是它啟動了兩個實例
附：pm2常用命令
- 啟動單個Node.js應用程序：
pm2 start app.js - 啟動并命名應用程序：
pm2 start app.js --name="api" - 停止單個應用程序：
pm2 stop app_name|app_id - 停止所有應用程序：
pm2 stop all - 重啟單個應用程序：
pm2 restart app_name|app_id - 重啟所有應用程序：
pm2 restart all - 刪除單個應用程序：
pm2 delete app_name|app_id - 刪除所有應用程序：
pm2 delete all - 列出所有啟動的應用程序：
pm2 list - 顯示應用程序的詳細信息：
pm2 show app_name|app_id - 監視每個應用程序的CPU和內存使用情況：
pm2 monit - 查看所有應用程序的日志：
pm2 logs - 查看指定應用程序的日志：
pm2 logs app_name|app_id - 設置應用程序開機自啟動：
pm2 startup
如果是nuxt2請查看：https://blog.csdn.net/dan_seek/article/details/102875068
)