基于vue+nuxt服务端渲染项目总结

基于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"
}
复制代码

转载于:https://juejin.im/post/5ba336c6f265da0afb333ffd