Vue服务端渲染框架Nuxt的那些事

Vue服务端渲染框架Nuxt的那些事

最近公司在重构项目，为了有利于SEO，须要使用到服务端渲染，在查阅了一番资料后选择了Nuxt.js，Nuxt.js 是一个基于 Vue.js 的通用应用框架，详情能够看官网，这里主要记录下在使用过程当中遇到的问题及解决方案。
技术栈：Vue + Vue-Router + Vuex + Element-Ui + Nuxt + Axios

---

1. 项目构建

   Nuxt.js 官方提供了脚手架「 确保安装了npx（npx在NPM版本5.2.0默认安装了）」
      npx create-nuxt-app <项目名>  按照提示选择适合本身项目的配置便可
      而后 npm run dev。

2. 遇到的问题
   1、router自定义
   发现如今不少的框架都有一套本身的路由生成规则（基于vue-router）而后在对应的目录下建立目录，即会本身生成对应的路由，若是对url的路径没有要求的这样也是能够的，若是想要自定义路由的话，就须要添加些配置。具体以下：

   extendRoutes (routes, resolve) {
         routes.push({
           name: 'father',     /** 自定义路由的name **/
           path: '/father',    /** 自定义路由的path **/
           component: resolve(__dirname, 'pages/father/index.vue'), /** 组件路径 **/
           children: [{    /** 子路由配置 （其它相同） **/
             name: 'son',
             path: '/son',
             component: resolve(__dirname, 'pages/son/index.vue')
           },
           {
             name: 'daughter',
             path: '/daughter',
             component: resolve(__dirname, 'pages/daughter/index.vue')
           }]
         })
       }

   对应的参考官方Nuxt.js自定义路由

3. 自定义请求头（基于axios请求的base_url修改）
   需求描述：公司的有正式环境和特使环境对应不一样的服务器，因此须要在请求的时候添加对应的请求头，具体配置能够参考以下代码：
   package.json配置：

   "scripts": {
       "dev": "cross-env NODE_ENV=development PORT=3333 nuxt",
       /** 本地环境：这里给环境变量NODE_ENV指定了对应的development的值和指定了运行端口 **/
       "build": "cross-env NODE_ENV=online nuxt build",
       /** 打包：指定了环境变量的值为online **/
       "start": "HOST=0.0.0.0 PORT=3333 nuxt start",
       /** 打包：指定了环境变量的值为online 端口为3333 HOST为0.0.0.0 百度了一下，
       0.0.0.0表明本机的全部ip地址,即同网段其余机器也能够访问的，
       默认的127.0.0.1因为和本地ip绑定了，因此只有绑定到本机地址的服务能被同网段其余机器访问**/
       "generate": "nuxt generate",
       "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
       "precommit": "npm run lint"
     },

   axios.js配置：

   /** 自定义请求base_url  **/
   if (process.env.NODE_ENV === 'test') {
     axios.defaults.baseURL = 'http://test'
   } else if(process.env.NODE_ENV === 'online') {
     axios.defaults.baseURL = 'http://online'
   } else {
      axios.defaults.baseURL = 'http://127.0.0.1'
   }

   这里使用的NODE_ENV因为在nuxt.js默认就存在，因此不须要定义这个变量，若是须要声明一个不存在的环境变量，须要在nuxt.config.js里面添加以下配置

   /** 下面声明了一个PATH_TYPE变量，其他的不须要改变，只须要将对应的NODE_ENV改为PATH_TYPE便可 **/
   env: {
       PATH_TYPE: process.env.PATH_TYPE
   }

   必定要看备注：要运行上面的示例，你须要运行npm install --save-dev cross-env 安装 cross-env。若是你在非Windows环境下开发，你能够不用安装cross-env，这时须要把 start 脚本中的cross-env去掉。
   官方文档：1.主机和端口配置 2.dev属性修改

4. 打包webpack配置
   nuxt.js框架默认使用过了一套配置，可是看了编译出来的源码后发现css文件所有在源码里，感受不是很利于收缩引擎的SEO，因此自定义了打包配置，代码以下：

   optimization: {
         runtimeChunk: {
           name: 'manifest'
         },
         splitChunks: {
           chunks: 'all',
           cacheGroups: {
             libs: {
               name: 'chunk-libs',
               chunks: 'initial',
               priority: -10,
               reuseExistingChunk: false,
               test: /node_modules\/(.*)\.js/
             },
             styles: {
               name: 'chunk-styles',
               test: /\.(scss|css)$/,
               chunks: 'all',
               minChunks: 1,
               reuseExistingChunk: true,
               enforce: true
             }
           }
         }
       },
       extractCSS: true, /** 将css单独打包成一个文件，默认的是所有加载到有事业 **/

   参考文档： 1.Nuxt.js将CSS提取到一个单独的CSS文件 2.构建配置

End：杭州前端一枚：若有疑惑欢迎留言咨询或者474268433@qq.com 🤓🤓