蜜儿,夏妍的秋天片尾曲,镫恒的咒语
vue因其简单易懂的api、高效的数据绑定和灵活的组件系统，受到很多前端开发人员的青睐。国内很多公司都在使用vue进行项目开发，我们正在使用的简书，便是基于vue来构建的。
我们知道，spa前端渲染存在两大痛点：（1）seo。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他seo相关信息，使网站无法在搜索引擎中被用户搜索到。（2）用户体验。大型webapp打包之后的js会很庞大，于是就有了按模块加载，像require.js一样，异步请求。webpack盛行，就变成了代码分割。即便如此，受制于用户设备，页面初次渲染还是有可能很慢，白屏等待时间太长，对日益挑剔的用户群体来说，无法接受。
因此，对于那些展示宣传型页面，如官网，必须进行服务端渲染（ssr）。
vue官方ssr文档的配置太过繁琐，需要对node和webpack有相当不错的使用经验，对于一个前端小白而言，官方推荐nuxt。
nuxt是一款基于vue的服务端渲染框架，跟react的next异曲同工。
最近公司在重构项目，为了有利于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.
打包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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论