nuxtjs部署踩坑

为什么用nuxtjs

什么配置什么渲染那些不管，个人感觉会使用它最主要的原因是良好的SEO，对需要搜索引擎提供流量的项目很友好(比如：官网、新闻、博客、电影、咨询等)。

nuxt部署流程

1. 服务器安装node环境

1.1 下载传送门

我这里选择比较稳定的14版本*(注意：不要下载arm64那个版本的，那个不行)

 1.2 找个地方新建一个文件夹，用于上传node文件

1.3 解压文件 

tar -xvf node-v14.20.0-linux-x64.tar.xz

解压完成后

 1.4 移动文件夹到 /usr/local/node

mv node-v14.20.0-linux-x64 /usr/local/node

node-v14.20.0-linux-x64为解压后的文件夹名称

1.5 配置环境变量

vi /etc/profile //有的编辑指令是vim，各有差异，执行这一步后一定要按i键，才可以接下来的操作

export PATH=$PATH:/usr/local/node/bin //编辑完成后按esc键退出编辑，输入:wq!保存，/usr/local/node/bin为node转移后的文件路径

source /etc/profile // 配置生效

 1.6 查看是否安装配置成功

node -v

npm -v

 如图即安装成功，如果失败，重新找个版本的node，重复上述操作

2. 安装pm2(守护进程)

npm install -g pm2

同样检查是否安装成功

pm2 -v

3. 打包部署

本地运行npm run build打包，然后把 .nuxt、static、nuxt.config.js、package.json、package-lock.json上传到服务器

最后服务器项目目录里面就是这几个文件
.nuxt
static
nuxt.config.js
package.json
package-lock.json

上传好后，运行 npm install安装依赖（如果有些依赖安装失败，可以切换npm镜像源到淘宝源：npm config set registry https://registry.npm.taobao.org）

安装完依赖之后，文件应该有这些

 然后运行 npm run start 启动项目，就可以进行访问了，默认访问端口为3000，也可以自己进行配置，package.json

此时在浏览器输入 http://服务器地址:8988 就可以正常访问我们的项目了

 host0.0.0.0的含义

其中host0.0.0.0表示一个集合，所有不清楚的主机和目的网络。

网络中0.0.0.0的IP地址表示整个网络，即网络中的所有主机。

使用的时候只要将0.0.0.0换为自己的主机地址或者是localhost即可

4. proxy代理配置

在nuxt.config.js中

•  这里与普通vue spa开发的不同在于，不管是开发环境还是生产环境，都会走proxy代理
• 所以我们在写接口的时候，不用区分开发环境和生产环境
• 例如：/api/login

5. pm2守护进程

在服务器项目目录下运行 pm2 start nuxt

如项目有修改，重新上传后，运行 pm2 restart nuxt 重启守护进程

pm2 指令有很多，这里列举一下常用的几个：

pm2 list // 查看任务列表
pm2 stop app_name|app_id // 停止指定name或者id的任务
pm2 stop all // 停止所有任务
pm2 delete app_name|app_id // 删除指定name或者id的任务
pm2 delete all // 删除所有任务
pm2 logs // 查看日志
pm2 kill // 杀死pm2进程

另外：我发现nuxt的项目不需要配置nginx，所以这里就不介绍nginx的配置了，也是刚开始搞nuxt的项目，不知道是不是这样的，如有不对，还望不吝解惑。

6. pm2守护多进程

进入到服务器项目目录下，执行

pm2 start npm --name web-name -- run start

其中，web-name为自定义进程名字，即可启动项目并将进程添加到pm2守护进程列表中。

切换到另一个需要守护的项目下，执行相同指令(换一个进程名字)，即可同时守护多进程了。

如图：

 然后执行以上pm2指令进行对应操作就好了。