为什么用nuxtjs

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

nuxt部署流程

1. 服务器安装node环境

1.1 下载传送门

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

nuxt 3使用axios nuxt node_linux

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

nuxt 3使用axios nuxt node_上传_02

1.3 解压文件 

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

解压完成后

nuxt 3使用axios nuxt node_上传_03

 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 // 配置生效

nuxt 3使用axios nuxt node_linux_04

 1.6 查看是否安装配置成功

node -v

npm -v

nuxt 3使用axios nuxt node_上传_05

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

2. 安装pm2(守护进程)

npm install -g pm2

同样检查是否安装成功

pm2 -v

nuxt 3使用axios nuxt node_json_06

3. 打包部署

本地运行npm run build打包,然后把 .nuxtstaticnuxt.config.jspackage.jsonpackage-lock.json上传到服务器

最后服务器项目目录里面就是这几个文件
.nuxtstaticnuxt.config.jspackage.jsonpackage-lock.json

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

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

nuxt 3使用axios nuxt node_linux_07

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

nuxt 3使用axios nuxt node_linux_08

此时在浏览器输入 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中

nuxt 3使用axios nuxt node_服务器_09

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

5. pm2守护进程

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

nuxt 3使用axios nuxt node_服务器_10

如项目有修改,重新上传后,运行 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守护进程列表中。

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

如图:

nuxt 3使用axios nuxt node_linux_11

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