Vue 服务端渲染框架 Nuxt 的那些事
最近公司在重构项目，为了有利于 SEO，需要使用到服务端渲染，在查阅了一番资料后选择了 Nuxt.js，Nuxt.js 是一个基于 Vue.js 的通用应用框架，详情可以看官网，这里主要记录下在使用过程中遇到的问题及解决方案。技术栈：Vue + Vue-Router + Vuex + Element-Ui + Nuxt + Axios
项目构建
Nuxt.js 官方提供了脚手架「确保安装了 npx（npx 在 NPM 版本 5.2.0 默认安装了）」
npx create-nuxt-app < 项目名 > 按照提示选择适合自己项目的配置即可
然后 npm run dev。
遇到的问题 一、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 自定义路由
自定义请求头（基于 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 属性修改
打包 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 ????????