有一種坑叫作代碼重構--vue轉nuxt

前記

當接到領導說某某「seo精鯉」（實際上只會搞搞百度推廣，連代碼都不會寫的）要將以前開發好的h5商城適應seo，內心頓時一萬隻草泥馬在奔騰，由於我知道接下來絕B不少坑在等着我去踩。沒辦法，生活在底層的技術開發爲了苟且也只能將這口氣憋回去，硬着頭皮，一個字，就是幹。

技術選型

vue、react等新技術的確是香，這點不能反駁，但在首屏加載和seo上還得另外作優化。若是本身動手作一套服務端渲染還得對node比較熟悉，技術難度上上升了一個量級，並且在時間成本上也會相對應要花費很多精力。像這種開發完的項目再作seo優化的話，通常是建議在不動代碼的前提下解決是最好的方案。因而乎，我便一波在網上找解決方案啊，發現本身搭建個服務器借用phanthom.js在nginx上作文章，識別爬蟲的標識而後將提早渲染好的頁面給它爬，正常的用戶仍是走vue spa頁面。這個的確是個可行的方案，我也在測試服務器上試過了，但發現這庫居然沒在維護了，而後換成了popputter,這個是谷歌公司在維護的一個庫，其實是開啓一個無頭瀏覽器可進行自動化測試和爬蟲，因而，我又一頓寫代碼參照第一種方案的思路確實能將vue動態頁面轉爲靜態化渲染的頁面。但這兩種方案對於百度蜘蛛都存在着欺騙性，領導和精鯉怕被降權，因此仍是被pass掉了（不過這兩種方案我是建議能夠試試的）這兩種對於咱們開發來講最輕鬆的方案。那沒辦法了，只能上nuxt了。具體環境搭建和部署可參考我以前寫的一篇博客nuxt環境搭建部署， 這裏就不做夠多的闡述。

技術實現

• 工程目錄結構

在這個重構項目中我想盡可能保持原有工程項目結構不受太大的變化，由於在nuxt默認的腳手架搭建的項目中，路由是自動生成的，而vue項目中是有路由配置文件的。 在nuxt.config.js指定下源碼目錄：

module.exports = {
	srcDir: 'src/'
}
複製代碼

• 路由配置

在github找到了nuxt社區提供的router-module能夠改寫nuxt默認的有page頁面組件生成的路由，但項目中組件代碼你不能再放在page文件夾下，這裏你只須要安裝@nuxtjs/router npm i --save-dev @nuxtjs/router, 而後再srcDir目錄中新建一個router.js文件，並在nuxt.config.js配置文件中module屬性中配置

module.exports = {
	modules: [
		'@nuxtjs/router'
	]
}
複製代碼

但這裏示例中直接是直接經過import方式變量引入(非懶加載模式)，當組件多的時候會引起性能問題，所以須要採起路由懶加載方式引入。但若是你直接採用vue-router官方提供的 const Index = import('@/views/Index.vue') 或者webpack的require.ensure

{  
    path: '/home',   name: 'home',   
    component: r =>require.ensure([], () => r(require('@/components/home')), 'demo')
}
複製代碼

再或者是vue異步組件方式

{
    path: '/path',
    name: 'componentName',
    component: resolve => require(['@/componentPath'], resolve),
}
複製代碼

都會觸發nuxt報錯

我最終在社區中找到了

{
	path: '/index',
	name: 'Index',
	component: () => import('@/index').then(m => m.default || m )
}
複製代碼

解決了nuxt自定義路由懶加載的方法。

• 路由鉤子

在這裏對於路由鉤子的前衛和後衛控制，我是寫在了plugins中，由於根據nuxt提供的生命週期咱們知道在發生nuxt-link路由改變時是先加載plugins的，並且在pugins中能夠拿到router的實例。 router.guards.js

export default async function ({app, router, redirect}){
	app.router.beforeEach((to, from, next) => {
		...
	})
	app.router.afterEach((to, from, next) => {
		...
	})
}
複製代碼

性能優化

在剛轉爲nuxt框架時，因路由不是按照nuxt中page文件夾自動生成路由的規則，致使項目首屏渲染和路由切換耗時長，performance下分析主要是js文件parse消耗時間長，我經過腳本nuxt build -a 分析包的大小狀況。得出路由未採起懶加載致使進入首頁時將整個項目的路由都加載完才執行，這顯然是不合理的嚴重影響性能，因而乎，我採起了上面提到的懶加載方式解決了路由的包文件過大問題。 另外就是引入了大多npm第三方包，其中math.js這個包沒有按需加載，致使將所有函數引入包大小也很大，可經過按需加載import { bigNumber , add ,subtract, divide, multiply } from 'mathjs' 還有一些vue-awesome-swiper ,html2canvas等第三方包建議可經過cdn引入，ui框架如element-ui ,vant-ui，iview等可經過按需加載引入。

深坑

1. 我這邊代碼用相對路徑訪問static文件夾時缺找不到文件，因此我將其放進了src下， 這時得使用絕對路徑訪問。不過也沒問題，nuxt會自動默認去訪問static文件下的文件
2. vux-ui庫不是全部組件支持ssr，因此引用其組件會引起報錯You may need an additional loader to handle the result of these loaders.，在github vux庫上說要配置vux-loader 可是發現配了以後仍是然並卵，以後直接拋棄用了有贊開源的vant-ui，支持ssr。
3. 當你的組件中用了大量的v-if會致使nuxt ssr渲染時因爲客戶端和服務端渲染不匹配致使客戶端報錯Failed to execute 'appendChild' on 'Node': This node type does not support this method致使頁面卡頓.這裏在github中找到了用v-show替換v-if，而且能夠用nuxt官方提供的<client-only>標籤讓其只在客戶端渲染來解決這個問題。
4. windows、document等引起的問題區分環境就好if(process.browser){...},以前在main.js中的vue全局方法和組件能夠經過plugins中引入

後記

代碼重構之路到此告一段落，爲了seo收錄量後續重點工做將要對url規則優化，採用僞靜態化處理。鄙人才疏學淺，有什麼不對的地方，歡迎批評指正。