最近官网要上，调研了一圈发现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>
前端页面的开发可点击这里
