当前位置:   article > 正文

nuxt3搭建和部署_nuxt3 部署

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       
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
上面报错的原因是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
  • 1
  • 2
  • 3
网络连接失败,需要手动配置一下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
  • 1
  • 2
  • 3

我试了一下配置这个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
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
如果执行命令后是这样子,就说明成功了,根据自己情况选择,我选择了默认的npm安装。
>node -v
v18.20.3
  • 1
  • 2

本次安装的node版本18.20.3

  "dependencies": {
    "nuxt": "^3.11.2",
    "sass": "^1.77.4",
    "vue": "^3.4.27",
    "vue-router": "^4.3.2"
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

新建项目时的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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

项目运行后访问 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
  • 1
  • 2
  • 3
  • 4
  • 5

可以看到项目在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">
................................
  • 1
  • 2
  • 3
  • 4
iv.配置nginx让域名可以访问网站

在nginx中增加如下配置

server {
		listen 80;
        server_name www.xxxx.run;
        location /{
                        proxy_pass http://localhost:3000; # 反向代理至node服务器
                 }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

最后执行nginx -s reload 让配置重载一下

现在可以在浏览器使用http:// www.xxxx.run访问刚才的部署的网站了

4、使用pm2部署

i.线上部署需要安装pm2程序

PM2是一个Node.js应用程序的生产进程管理器,可以用来启动、重启、停止和删除应用程序。使用npm install pm2 -g进行全局安装。

pm2 --version
5.4.1
  • 1
  • 2
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'
    }
  ]
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

参考: 部署 · 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   │
└────┴────────────────────┴──────────┴──────┴───────────┴──────────┴──────────┘
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

服务器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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/酷酷是懒虫/article/detail/1000287
推荐阅读
相关标签
  

闽ICP备14008679号