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

最近公司在重构项目，为了有利于SEO，需要使用到服务端渲染，在查阅了一番资料后选择了，Nuxt.js 是一个基于 Vue.js 的通用应用框架，详情可以看，这里主要记录下在使用过程中遇到的问题及解决方案。

1. 项目构建

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

2. 遇到的问题

   一、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')        }]      })    }

   对应的参考官方

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.

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. 2.

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