前言

由于vue通过js动态控制路由去生成内容,导致搜索引擎无法收录,天生不适合SEO。而Nuxt是一款基于vue的框架,内置了服务器端渲染。
Node.js 服务器将基于 Vue 的组件渲染成 HTML 并传输到客户端,而不是纯 javascript。与传统的 Vue SPA 相比,使用 SSR 将带来巨大的 SEO 提升、更好的用户体验和更多的机会。


Nuxt的部署与vue有出入,主要有两种模式,npm run generatenpm run build

一、generate模式

这种模式打包的时候会生成对应的html文件,如果项目中数据涉及到后台接口,那么在打包的时候所有的数据都会注定,后续若接口数据发生改变,页面也不会再变了,适合一些静态站点的项目。

使用generate打包跟之前vue一样,会生成一个dist文件夹,放到服务器即可


二、build模式

  1. 执行npm run build之后.nuxt文件夹里会生成一个dist文件夹
 npm run build
  1. .nuxtstaticpackage.jsonnuxt.config.js 四个文件放入到服务器对应的目录里

  1. 在服务器对应的目录安装项目依赖npm install
 npm install
  1. 安装完依赖之后 执行npm start 启动项目
 npm start
  1. 此时项目在3000端口启动,还需要再配置一下nginx
// An highlighted block
   server {
        listen       80;
        server_name  localhost;
        location / {
          proxy_pass http://127.0.0.1:3000;
        }
   }

pm2 进程守护

PM2 是具有内置负载均衡器的 Node.js 应用程序的生产流程管理器。它允许您使应用程序永远保持活动状态,在不停机的情况下重新加载它们,并促进常见的系统管理任务。

  1. 安装
npm install -g pm2
  1. 启动服务
    进入到nuxt项目对应的文件夹,执行
pm2 --name=你的服务名 start npm -- run start

启动成功,这里我的服务名是 blog
pm2_list.jpg

  1. pm2常用命令
pm2 list                             查看所有进程
pm2 show 0                           查看进程详细信息,0为PM2进程id 
pm2 stop all                         停止PM2列表中所有的进程
pm2 stop 0                           停止PM2列表中进程为0的进程
pm2 reload all                       重载PM2列表中所有的进程
pm2 reload 0                         重载PM2列表中进程为0的进程
pm2 delete 0                         删除PM2列表中进程为0的进程
pm2 delete all                       删除PM2列表中所有的进程