浅谈Vue服务端渲染框架Nuxt的那些事
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默认安装了)」
npxcreate-nuxt-app<项目名> 按照提示选择适合自己项目的配置即可
然后npmrundev。
遇到的问题
一、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-envNODE_ENV=developmentPORT=3333nuxt", /**本地环境:这里给环境变量NODE_ENV指定了对应的development的值和指定了运行端口**/ "build":"cross-envNODE_ENV=onlinenuxtbuild", /**打包:指定了环境变量的值为online**/ "start":"HOST=0.0.0.0PORT=3333nuxtstart", /**打包:指定了环境变量的值为online端口为3333HOST为0.0.0.0百度了一下, 0.0.0.0代表本机的所有ip地址,即同网段其他机器也可以访问的, 默认的127.0.0.1由于和本地ip绑定了,所以只有绑定到本机地址的服务能被同网段其他机器访问**/ "generate":"nuxtgenerate", "lint":"eslint--ext.js,.vue--ignore-path.gitignore.", "precommit":"npmrunlint" },
axios.js配置:
/**自定义请求base_url**/ if(process.env.NODE_ENV==='test'){ axios.defaults.baseURL='http://test' }elseif(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 }
一定要看备注:要运行上面的示例,你需要运行npminstall--save-devcross-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.构建配置
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。