前言
网上大部分关于
Nuxt打包部署教程真的是可以用五花八门来形容，这对于第一次接触的朋友简直是无从下手。
本文将尽可能详细的描述，打包部署及上线到服务器完整流程。
准备工作
强烈建议您打开 官方文档，与本教程对照着，这有助于您更好的理解。
您需要先了解一下 Nuxt 命令及其作用：
| 命令 | 描述 |
|---|---|
| nuxt | 启动一个热加载的 Web 服务器（开发模式） ，调试开发的时候用的。 |
| nuxt build | 利用 webpack 编译应用，压缩 JS 和 CSS 资源，最终上线打包的时候用。 |
| nuxt start | 以生成模式启动一个 Web 服务器 (nuxt build 会先被执行)，打包后放在服务器中使用的启动命令。 |
| nuxt generate | 编译应用，并依据路由配置生成对应的 HTML 文件，用于静态站点的部署。 |
整体流程
您需要使用
nuxt build命令对项目进行打包，命令执行成功后，将项目内.nuxt、static、package.json、nuxt.config.js这 4 个拷贝出来放在一个文件夹内，上传到服务器上。然后 在服务器上（后续全是服务器上操作） 打开这个目录，执行npm install安装依赖，成功安装后接着执行npm start启动命令，这样就在服务器上完成了启动项目，控制台会得到一个本地域名（localhost / 127.xxx）。然后需要在服务端安装PM2进程守护，守护刚才控制台得到的本地域名（localhost / 127.xxx），这样就能保证这个本地域名就算关闭终端也不会挂掉。最后呢，还需要使用Nginx来监听与代理转发这个本地域名（localhost / 127.xxx），这样就能让其在外网（用户）也能访问。
简单来划分，就是以下 3 块内容：
- Nuxt.js 项目的打包。
- PM2 进程守护，保证 node 服务进程不挂掉。
- Nginx 反向代理，提供转发外网访问。
第一步
注意：为了让您看得更清楚，以下示例删减了大部分碍眼的配置，请合理进行复制粘贴借鉴使用。
在开始之前，您需要检查一下跨域配置是否正确，
打开 nuxt.config.js ，为您准备好了一份 “标准” 的请求及跨域配置示例，
// 除了要修改【接口地址】，其他任何配置都不需要动！
// 除了要修改【接口地址】，其他任何配置都不需要动！
// 除了要修改【接口地址】，其他任何配置都不需要动！
export default {
// 详见: https://wangjiabin.blog.csdn.net/article/details/125673201
modules: [
'@nuxtjs/axios',//请求库
'@nuxtjs/proxy'//代理插件
],
axios: {
proxyHeaders: false,
credentials: false,
prefix: '/api',
proxy: true,// 开启代理
},
proxy: {
'/api': {
// 这块填你接口地址!!!
target: 'http://xxx.com',//要代理的后端地址(重要)
pathRewrite: {
'^/api' : ''
},
changeOrigin: true
}
},
// 这块配置要写上
server: {
port: 8001,//这块要自定义,否则多个肯定有端口冲突
host: '0.0.0.0', // 注意：这里有个坑，host 写成127.0.0.1 无法访问
}
}
第二步
首先来做一下前端的工作，您需要将
Nuxt.js项目进行打包。
打开项目根目录，执行如下命令（只要不报错就算是成功）：
npm run build
然后，您在桌面上建个 nuxt 文件夹，将以下 4 个文件拷贝到其中：
最终文件夹内容：
到这里，就完成了 Nuxt 项目的打包，下一步将这个文件夹上传到服务器。
第三步（服务端操作）
注意：您要确保服务端已经配置
node.js环境及常见配置，否则您需要先干这些事。
将刚才打包的产物（4 个）放到服务器上后，服务器终端执行如下安装命令：
npm install
安装完依赖后，接着执行如下启动命令：
npm start
启动成功后，会出现如下图所示效果（如果是 Localhost 则查看 第一步）：
到这里，前端算是成功了，证明您的项目是正常运行无报错的。
这时页面就能正常运行了，此时输入你服务器的ip地址和刚刚配置的端口ip:port就可以访问页面啦。 不过这个时候，我们的项目运行依赖终端，不能关闭终端，所以我们要使用pm2守护进程。
从这一步开始，其实后续的步骤应该由后端或运维来完成了！
第四步（服务端操作）
项目在服务端成功跑起来了，但是不能保证其关闭终端继续运行与稳定性，需要进程守护。
接下来安装 PM2 进程守护，不懂的可以去百度这里不展开介绍，
在服务端执行如下全局安装命令：
npm install pm2 -g
检查是否安装成功：
pm2 -v
这里列出一些常用的 pm2 命令：
| 命令 | 描述 |
|---|---|
| pm2 list | 当前守护的进程列表 |
| pm2 stop app_name | 停止守护 app_name 进程 |
| pm2 delete app_name | 删除 app_name 进程 |
打开 4 个文件中的 package.json，配置一个 pm2 命令：
pm2 start yarn --interpreter bash --name oitboy-front -- start
这个命令就是执行 进程守护，执行它：
npm run pm2
最终通过 pm2 list 查看是否挂起成功，status 字段显示 online 了就是挂起成功了：
┌─────┬──────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
│ id │ name │ namespace │ version │ mode │ pid │ uptime │ ↺ │ status │ cpu │ mem │ user │ watching │
├─────┼──────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
│ 0 │ 您的项目名 │ default │ N/A │ fork │ 1190 │ 0s │ 0 │ online │ 0% │ 7.8mb │ den… │ disabled │
└─────┴──────────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘
失败了？请参考 这个章节 试试看。
第五步（服务端操作）
项目完事了，进程守护也有了，最终就差使用
Nginx进行转发了。
首先是安装，请参考 安装教程 ，网上很多自行搜索。
nginx 启动时会加载 /etc/nginx/conf.d/ 下的配置，我们只需要在这个文件夹下单独配置自己的配置就行，
创建一个自己的配置：
vim /etc/nginx/conf.d/myapp.conf
配置如下：
upstream nodenuxt {
server 127.0.0.1:3001; #nuxt项目 监听端口
keepalive 64;
}
server {
listen 80;
server_name oitboy.com;
location / {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Nginx-Proxy true;
proxy_cache_bypass $http_upgrade;
proxy_pass http://nodenuxt; #反向代理
}
}
然后重启 Nginx：
nginx -s reload
此时就可以输入你的域名访问你的项目了（当然你得提前解析域名到你的服务器上）。
失败了？请参考 这个章节 试试看。
其他参考
如果您遇到了问题，也可以参考以下优秀教程：
- https://juejin.cn/post/6994328133092507679
- https://juejin.cn/post/6844903666701320205
- https://juejin.cn/post/6844904186979565581
SEO
Nuxt - 项目打包部署及上线到服务器流程，详细介绍Nuxt项目上线部署，服务端渲染(ssr)项目及nuxt项目部署过程，nuxt项目打包上线，Nuxt项目的部署教程，NuxtJS项目部署方案，Nuxt 如何部署到线上，nuxt项目部署篇，Nuxt项目搭建到Nuxt项目部署，Nuxt项目从开始到部署，详细教程。服务器部署nuxt项目,nuxt服务端部署上线，在服务器上部署nuxt项目，NuxtJS项目——命令和部署。