为什么用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指令进行对应操作就好了。