前记

当接到领导说某某“搜索引擎优化精鲤”（实际上只会搞搞百度推行，连代码都不会写的）要将之前开发好的h5商城适应搜索引擎优化，心里顿时一万只草泥马在飞跃，因为我知道接下来绝B很多坑在等着我去踩。没办法，生活在底层的技能开发为了苟且也只能将这口气} 8 ^ 3 ^ E憋回去，硬着头皮，一个h W z ] } 3 `字，就是干。

技能选型

vue、react等新技能的确是香，n } K X 1 J这点不能反驳，但在首屏加载和搜索引擎优化上还得别的做Z O c Y优化。如果自己动手做一套服务端烘托还得对node比较熟悉，技能难度上上升了一个量级，而且在时间本钱上也会相对应要花费不少精, – )力。像这种开发完的% t = ^ $ w B项目再做搜索引擎优化优化的话，一般是主张在不动代码的前提下处理是最好的计划。所以乎，N Z ! o 2 y w i v我便一波在网上找处理计划啊，发现自己建立P O – D i 1个服务器借用phan^ V ~ : h A 1 3 }thom.js在ngie } h bnx上做文章，辨t ; ( c %认爬虫的标识然后将提早烘托好的页面给它爬，正常的用户还o j { @是走vue spa页面。这个的确是个可行的计划，我也在测验服务器上试过了，但发现这库居然没在保护了，然后换成了popputter,这个是谷歌公司在保护的一个库，实际上是敞开一个无头浏览器可进行主动化测验和爬虫，所以，我又一j s h S [顿写代码参照第一种计划的思路确实能将vue动态页面) m N转为静态化烘托的页面。但这两种计划关于百度蜘蛛都存在着欺骗性，领导和精鲤怕被降权，所以还是被pass掉了（不过这两种计划我是主张能R @ s够试试的）这两种关于咱们开发来说最轻松的计划。那没办法了，只能上nuxt了。详细环境建立和布置可参考我之前写的一篇博客nuxt环境建立布置， 这里就不作够多的阐述。

技能实现

  • 工程目录结构

在这个重构项目中我想尽量保持原有工程项目结构不受太大的变化，因为在nuxt默认的脚手架建立的项目中，路由是主动生成g a } G T = ( [ /的，而vue项目中是有路由配置文件的。
在nuxt.config.js指定下源码目录：

module.exports = {
srcD: D Jir:  J 8 u ` n p p'src/'
}
有一种坑叫做代码重构--vue转nuxt
有一种坑叫做代码重构--vue转nuxt
  • 路由配置

在github找到了nuxt社区供给的router-module能够改写nuxt默认的有page页面组件生成的路由，但项目中组件代码你不能再放在page文件夹下，这里你只需求安装@nuxtjs/router
npm i) n 3 C + m & --save-dev @nuxtjs/router, 然后再srcD_ i Z M 7 9 c W Mir目录中新建一个1 p x y U Z B =router.js文件q I y ) 2 O 0 e，并在nuxt.config.js配置文件中module属性中配置

modui ^ - L Ile.exports = {
modules: [
'@nuxtjs/router'
]
}

但这里示例中直接是直接经过import办法变量引进(非懒加载形式)，当组件多的时分会引发功能问l ( : * X G w题，因为需求采纳路由懒加载办法引进。但如果你直接选用vue-roh I ] { 2 { l G ;uter官方供给的
const Index = import('@M w Z/vi, Z } z X _ = A 2ews/Index.vue')
或许webpack的require.ensure

{
path: '/home',   name: V u :'home',
component: r =>require.ensure([], () => r(require('@/components/home')), 'demo')
}

再或许是vue异步组件办法

{
pat, v $ 0 9h: '/path',
name: 'componentName',
component: resolve => require(['@/componentPath'], resolve),
}

都会触发nuxt报错

有一种坑叫做代码重构--vue转nuxt

我终究在社区中找到了

{
path: '/indexM 5 * K I 0 F',
name: 'Index',
component: () => import('@/index').then(m => m.defa( g 4 Eult || m )
}

处理了nuxt自定义路由懒加载的办法。

  • 路由钩子

在这里D O / k [ p L `关于路由钩子的前卫和后卫操控，我是写在了plugins中，因为根据nuxt供给的生命周期咱们知道在发生nuxt-link路由改变时是 ^ :先加载plugins的，而且在t 4 . 3 m ! YpugiP R I y V ,ns中能够拿到router的实例。
router.guards.j% S R ts

export default async function ({app, router, redirec` T e Q i v J Dt}){
app.rouP h d 1 k , 3 t Vter.bN B z E K PeforeEach((to+  Q [  G X [ +, from, next) => {
...
})
app.router.afterEach((tO / ? Z Z * ao, from, next) => {
...
})
}

功能优化] L / v

在刚转为nuxt结构时，因路由不是按照nuxt中page文件夹主动生成e I P H路由的规矩，导致项目首屏烘托和路由切换耗时长，performancG U m f C 0 g qe下剖析主要是js文件parse耗费时间长，我经过脚本nuxtl n ~ build -a 剖析包的巨细状况。得出路由未采纳懒加载导致进入首页时将k 5 j u V ^ = `整个项目的路由都加载完才履行2 b ! L J ? G : B，这显然是不合理的严重影响功能，所以乎，我采纳了上面提到的懒加载办法处理了路由的包文件过大问题。
别的就是引进了大多npm第三方包，其间math.js这个包没有按需加载，导致将全部函数引进包巨细也很大，可经过按需加载import { bigNumber , add ,subtract, divide, multiply } from '~ P 9 $ U h kmathjs'
还有一些vue-& ~ )awesome-; V C ] f 1 t 9 Kswiper ,htmlcanvas2等第三方包主张可经过cdn引进，ui结构如elea J @ d tment-ui ,vant-ui，iview等可经过按需[ x ? X 8 9 w 加载引进。

有一种坑叫做代码重构--vue转nuxt
有一种坑叫做代码重构--vue转nuxt
有一种坑叫做代码重构--vue转nuxt
有一种坑叫做代码重构--vue转nuxt

深坑

  1. 我这边代码用相对路径拜访static文件夹时缺找不到文件，所以我将其放进了src下，
    时，得使用绝对路径拜访。T 2 z u – ( V不过也没问题，nuxt会主动默认去拜访static文件下的文件
  2. vux-ui库不是所有组件支持sx q 3 } 6 C !sr，所以引用其组件会引发报错You may need an addit* i ? d uional loader to handle the result ofj y t Y d @ A @ thesY H j T + ] –e loaders.，在github vux库上说要配置vux-loader
    但是发现配了之后还是然并卵，之后直接扔掉用了有赞开源的vz – , F | aant-ui，支持ssrr @ /。
  3. 当* ; q @你的组件中用了很多的v-if会导致nN : N f t quxt ssr烘托时} q ( @ O Q因为客户端和服务端烘托不匹配导致D p *客户端报错Failed to execute ‘appN ! ?endChild’ on ‘No] A z O u x , Mde’: This node type does not support this method导致页O | 9 h | y 0面卡顿.这里在github中找到了用v-show替换v-if，而且能够用nuxt官方供给的<client-only>标签让其只1 x )在客户端烘托来处理这个问题。
  4. windows、docume7 o S z P ynt等引发的问题区别环境n L / _ Y就好if(process.browser){...},之前在main.js中的vuC @ N Fe全局办法和组件能够经过plugins中引进

跋文

代码重构之路到此告一段落，为了搜索引擎优化录入量后续重点工作将要对url规矩优化I v i L q，选用伪静态化处理。鄙人才疏学浅，有什么不对的地方，欢迎批评指正。