nuxt3搭建和部署

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) y

 WARN  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 portal

ERROR  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   │
└────┴────────────────────┴──────────┴──────┴───────────┴──────────┴──────────┘