基于vue+nuxt服务端渲染项目总结
vue的开发体验十分友好，然而spa网页的普遍痛点是seo优化和首屏性能问题。随着vue2.0的发布，官方也提出了ssr服务端渲染技术解决方案。团队最终选择使用基于vue的nuxt服务端渲染框架进行开发，开发过程中遇到过很多问题，在这里总结下。
SSR(服务端渲染)
(题外吐槽：并不是某某师超低概率的ssr :-)
SSR就是Server-Side Rendering的缩写。使用SSR你可以解决seo的问题并且可以提升下首屏预览的体验，缺点是增加了服务器开销。
目录结构
├── .nuxt 项目打包后的文件
├── assets 资源文件目录
├── components 基础组件目录
├── config 配置文件目录
├── layouts 布局目录
├── middleware 中间件目录
├── pages 页面目录
├── plugins 插件目录
├── server pm2配置文件目录
├── static 静态文件目录
├── store Vuex状态树目录
├── utils 工具函数目录
├── nuxt.config.js nuxt配置文件
├── package.json 应用依赖和脚本接口
复制代码需要注意的是assets和static的区别。assets用于存放未编译的静态资源，比如less、js等文件，static存放的静态资源文件不会被webpack进行构建编译处理。
路由
nuxt框架不需要专门进行配置路由文件，它会根据目录结构动态创建路由
├── pages
│── list
│── index
│── _id
│── index
复制代码nuxt会根据项目目录自动生成如下路由：
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'list',
path: '/list',
component: 'pages/list/index.vue'
},
{
name: 'list-id',
path: '/list/:id?',
component: 'pages/list/_id.vue'
},
]
}
复制代码服务端渲染
异步数据请求
如果要达到seo的效果，那么页面数据必须要在服务端请求并渲染后以后传到客户端。这里我们只需要使用nuxt的asyncData方法。在这个方法中我们可以按照自己的需要加入store、parmas、query等数据。最后return的数据可以直接适应this引用
async asyncData({ params, query }) {
let { data } = await axios.get("/api/xxx", {
params: {
...params,
...query
}
});
return { listData: data.list };
}
复制代码如果我们要同事请求多个接口，可以这样处理：
let [data1, data2, data3] = await Promise.all([
axios.get("/api/111"),
axios.get("/api/222"),
axios.get("/api/333")
])
return { data1, data2, data3 }
复制代码head属性配置
head() {
return {
title: `${this.detailData.title || 'xxx详情'}-xxx平台`,
meta: [
{
hid: "你的关键词",
content: this.detailData.title || 'xxx详情'
}
]
};
}
复制代码接口代理
接口代理使用 @nuxtjs/proxy @nuxtjs/axios,只需要在nuxt.config.js文件做如下配置：
modules: [
'@nuxtjs/axios',
'@nuxtjs/proxy'
],
proxy: {
'/api': {
target: 'https://www.xxx.com',
changeOrigin: true, // 支持跨域设置
pathRewrite: {
'^/api': '/'
}
},
'/download': {
target: 'https://file.xxx.com'
changeOrigin: true, // 支持跨域设置
pathRewrite: {
'^/download': '/'
}
}
}
复制代码环境变量设置
环境变量可以使用cross-env来处理，使用之前需要先安装依赖
npm i cross-env --save
复制代码"dev": "cross-env PATH_TYPE=native nuxt",
"build:dev": "cross-env PATH_TYPE=dev nuxt build",
"build:test": "cross-env PATH_TYPE=test nuxt build",
"build:prod": "cross-env PATH_TYPE=prod nuxt build",
复制代码部署问题
在服务端使用pm2守护进程，使用nginx进行反向代理。需要注意的是服务端node版本不能太低。另外可以提现写好pm2启动的配置文件，具体配置项可以参考pm2官方文档。在配置文件中建议加入环境变量，否则在如果在nuxt.config中使用了环境变量做判断的话，会出现无法识别的问题
pm2 start ./server/start.json
复制代码这是pm2启动的json配置文件：
{
"name": "nuxt-projects",
"script": "/opt/hy-enterprise/node_modules/nuxt/bin/nuxt",
"args": "start",
"instances": 4,
"ignore_watch": [
"node_modules",
"logs"
],
"env": {
"PATH_TYPE": "dev"
},
"error_file": "/app/log/hy-enterprise-cloud/app-error.log",
"out_file": "/app/log/hy-enterprise-cloud/app-out.log"
}
复制代码