最近官网要上，调研了一圈发现NUXT不错，记录下。
现在的开发几乎都是前后端分离的模式，此模式的好处就不多说，坏处在于对搜索引擎不友好，很难做SEO优化，所以使用了nuxt作为一种中间商加工的方式处理伪服务端渲染页面的方式。

1、搭建node环境

下载node压缩包：wget https://nodejs.org/dist/v12.16.1/node-v12.16.1-linux-x64.tar.gz
 解压压缩包：    tar -xvf node-v12.16.1.tar.gz
 移动到安装目录：mv node-v12.16.1 /usr/local/node

创建node和nmp软链接，全局启动-将node和npm启动命令加入到环境变量中

ln -s /usr/local/node/bin/node /usr/bin/node
 ln -s /usr/local/node/bin/npm /usr/bin/npm

验证是否安装成功：

 node -v
 npm -v

2、安装pm2守护进程

 全局安装命令：npm install -g pm2
 验证：pm2 -v

如果提示command not found
请先建立软链接

 ln -s /usr/local/node/bin/pm2 /usr/bin/pm2 

3、上传nuxt项目并配置

项目本地打包：npm run build
打包完成后，将.nuxt static nuxt.config.js package.json
传到服务器空间里，/usr/local/website

修改package.json中的config

"config": {
    "nuxt":{
        "host":"0.0.0.0"  -- 这里要允许任意IP访问，否则启动不起来
        "port":“3000”
    }
}

4、在服务器上部署运行

运行npm install 安装package里的依赖
运行npm start就可以运行起来nuxt的服务端渲染了

5、守护进程启动项目

守护进程启动形式: pm2 start npm --name "website" -- run start
重启命令：pm2 restart website
启动命令：pm2 start website
停止命令:  pm2 stop website

前端知识点

1、生命周期

Nuxt扩展了Vue的生命周期，大概如下：

export default {
  middleware () {}, //服务端
  validate () {}, // 服务端
  asyncData () {}, //服务端
  fetch () {}, // store数据加载
  beforeCreate () {  // 服务端和客户端都会执行},
  created () { // 服务端和客户端都会执行 },
  beforeMount () {}, 
  mounted () {} // 客户端
}

2、前端配置默认Meta标签

nuxt.config.js

module.exports = {
  head: {
    title: 'your project title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
    link: [
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
    ]
  }
}

3、 页面组件特有的Meta标签

<script>
export default {
  head () {
    return {
      meta: 
      [
        {
          name: 'keywords',
          content: '最强王者,今晚吃鸡'
        },
      ]
    }
  }
}
</script>

4、动态路由的Meta标签填充

游戏详情页面举例子，由于数据是异步获取的，我们需要把数据获取写在asyncData钩子，待数据获取成功才会渲染该页面组件

<script>
export default {
  async asyncData ({ app, params }) {
    let data = await app.$axios.get(`/appinfo/${params.id}`);
    return {
      appname: data.appinfo.appname
    }
  },
  head () {
    return {
      meta: 
      [
        {
          name: 'keywords',
          content: `${this.appname},无限宝石,无限元宝`
        },
      ]
    }
  }
}
</script>

前端页面的开发可点击这里