项目说明
Nuxt.js 发布部署
打包
Nuxt.js 提供了一系列常用的命令, 用于开发或发布部署。
命令 | 描述 |
nuxt | 启动一个热加载的 Web 服务器（开发模式）localhost:3000 |
nuxt build | 利用 webpack 编译应用，压缩 JS 和 CSS 资源（发布用）。 |
nuxt start | 以生产模式启动一个 Web 服务器 (需要先执行 |
nuxt generate | 编译应用，并依据路由配置生成对应的HTML文件 (用于静态站点的部署)。 |
如果使用了 Koa/Express 等 Node.js Web 开发框架，并使用了 Nuxt 作为中间件，可以自定义 Web 服 务器的启动入口：
命令 | 描述 |
NODE_ENV=development nodemon server/index.js | 启动一个热加载的自定义 Web 服务器（开发模 式）。 |
NODE_ENV=production node server/index.js | 以生产模式启动一个自定义 Web 服务器 (需要先执行 nuxt build)。 |
参数
- 可以使用 –help
- 常见的命令有：
- –config-file 或 -c: 指定 nuxt.config.js
- –spa 或 -s:
- –unix-socket 或 -n:
- 可以将这些命令添加至
package.json：
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
}这样可以通过 npm run <command> 来执行相应的命令。如: npm run dev。
提示:
要将参数传递给npm命令，您需要一个额外的 – 脚本名称(例如： npm run dev --参数 --spa)
开发模式
- 可通过以下命令以开发模式启动带热加载特性的 Nuxt 服务：
nuxt
# 或
npm run dev部署方式
- 配置 Host + Port
nuxt.config.js
module.exports = {
server: {
// 设置成 0.0.0.0 监听所有的网卡地址
host: '0.0.0.0', // 访问地址 default localhost
port: 3000 // 端口号 port
},
}- 压缩发布包
把下面图中标识的文件，进行压缩
说明：
.nuxt：NuxtJs 自动生成的资源文件static：存放静态资源nuxt.config.js：NuxtJs 的配置文件，为 Nuxt 服务提供支持package.json和package-lock.json：在服务端也需要安装第三方依赖包
- 把发布包传到服务端
- 查看服务器地址：（阿里云服务器为例）
- 连接服务器(cmd 命令行、XShell …)
ssh root@公网IP提示：root@123.57.28.48's password（输入密码），如图所示：
若忘记密码，则可以重置实例密码，如图所示：
- 在服务器中创建文件夹，并进入该文件夹
mkdir realworld-nuxtjs
cd realworld-nuxtjs/- 查看当前的目录路径
pwd输出结果 /root/realworld-nuxtjs，如图所示：
- 执行
exit命令退出服务器，或者新开一个 cmd 窗口，将压缩包上传到服务器
scp .\realworld-nuxtjs.zip root@公网IP://root/realworld-nuxtjs运行结果，如图所示：
.\realworld-nuxtjs.zip：上传的文件路径
root@公网IP://root/realworld-nuxtjs：上传至服务器的存放位置
- 解压
- 重新连接服务器，并进入压缩包存放的目录，进行解压
unzip 压缩包名称运行效果，如图所示：
- 查看解压后的文件，
-a表示查看全部（包括隐藏目录）
ls -a可以看到全部的上传文件，如图所示：
- 安装依赖
- 使用命令，安装依赖
npm i安装成功，如图所示：
注意：
- 如果没有安装
node，先要在服务器上安装node，否则会报错- node 安装教程：云服务器 ECS(CentOS) 安装 Node
- 启动服务
- 使用命令，启动 Web 服务
npm run start服务启动成功，如图所示：
- 访问
公网Ip:port，如图所示：
注意：
如果访问连接，没有响应，查看
是否配置安全组规则，或者 防火墙相关配置
pm2 启动 web 服务
PM2 是一个带有负载均衡功能的 Node 应用进程管理器。
- GitHub 仓库地址：https://github.com/Unitech/pm2
- 官网文档：https://pm2.keymetrics.io/
- 安装：
npm install --global pm2执行结果，如图所示：
- 配置软连接，类似于 环境变量
# ln -s pm2 二进制执行文件所在路径 /usr/local/bin(建立软连接的路径--环境变量)
ln -s /usr/local/node-v14.15.4-linux-x64/bin/pm2 /usr/local/bin- 进入项目文件所在目录，使用命令，启动服务：
pm2 start 脚本路径
# pm2 start npm -- start启动成功，如图所示：
- 关闭 pm2：
pm2 stop id
# 或
pm2 stop name
# pm2 stop 0运行结果，如图所示：
- PM2 常用命令
命令 | 说明 |
pm2 list | 查看应用列表 |
pm2 start | 启动应用 |
pm2 stop | 停止应用 |
pm2 reload | 重载应用 |
pm2 restart | 重启应用 |
pm2 delete | 删除应用## |
自动化部署
- 详情参见：【前端自动化构建】之 自动化部署
