Vue（SPA） WebPack模塊化打包、SEO優化（Vue SSR服務端同構直出）、全瀏覽器兼容完整解決方案

時間 2019-12-05

標籤 vue spa webpack 模塊化打包 seo 優化 ssr 服務同構瀏覽器兼容完整解決方案欄目網站開發简体版

原文原文鏈接

白駒過隙，時光荏苒css

　大概去年這個時候寫了angular 結合webpack的一套前端方案，今年此時祭出vue2結合webpack的一套前端方案。html

明年的這個時候我又是在作什麼...前端

讀在最前面：vue

　　一、本文講述Vue，Webpack 模塊化、SEO優化（Vue SSR 服務端同構直出）、全瀏覽器兼容（ie8以上）、圖片輪播等案例方案
node

二、技術點：vue、webpack、es六、vue-server-renderer、sass、autoprefixer、vue-meta、axiosjquery

　　三、閱讀本文，讀者應瞭解Vue、WebPack，有必定的前端基礎webpack

　　四、此文創建在已有node環境，sass環境，webpack環境下，特此說明ios

　　五、如下對關鍵代碼進行描述解析，下載完整項目，請拉到最底部！es6

構建Vue，Fire！web

一、目錄結構

（1）、頁面結構採用單一結構，分離js、css、vue、路由

（2）、數據倉庫結構分離actions、mutations、getters

├─build                        #webpa構建
│ ├─setup-dev-server.js        #開發配置
│ ├─vue-loader.config.js       #vue構建配置
│ ├─webpack.base.config.js     #基礎配置
│ ├─webpack.client.config.js   #客戶端配置
│ ├─webpack.server.config.js   #服務端配置
├─src                          #項目資源
│ ├─api                        #網絡請求
│ ├─components                 #組件
│ ├─filter                     #攔截器
│ ├─router                     #路由
│ ├─sass                       #樣式
│ ├─store                      #數據倉庫
│ ├─util                       #公共方法
│ ├─views                      #頁面
│ ├─app.js                     #入口js
│ ├─app.vue                    #入口頁面
│ ├─entry-client.js            #客戶端入口
│ ├─entry-server.js            #服務端入口
│ ├─index.html                 #母頁面
├─static                       #靜態資源
├─server.js                    #項目啓動入口

二、建立Vue入口文件，app.js

（1）、第三方樣式依賴：阿里iconfont

（2）、第三方js依賴：vue，vue-router，vuex，vuex-router-sync

（3）、路由、數據倉庫依賴：/router/index.js，/store/index.js

import Vue from 'vue'
import App from './app.vue'
import store from './store';
import router from './router';
import { sync } from 'vuex-router-sync'
import vueLocalStorage from 'vue-localstorage'

Vue.use(vueLocalStorage)
sync(store, router)

const app = new Vue({
    router,
    store,
    render: h => h(App)
})

export { app, router, store }

三、建立路由配置文件，/router/index.js

（1）、結合vue-meta實現動態meta

import Vue from 'vue'
import Router from 'vue-router'
import Meta from 'vue-meta'
import home from '../views/home'
import hotel from '../views/hotel'
import login from '../views/login'

Vue.use(Router)
Vue.use(Meta)
let routes = []

routes = routes.concat(home).concat(hotel).concat(login)

export default new Router({
    fallback: false,
    mode: 'history',
    routes: routes
})

三、建立數據倉庫配置文件，/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import config from './config'
import book from './book'
import comm from './comm'
import user from './user'

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        config,
        book,
        comm,
        user
    }
})

要點梳理

es6 + wait/async + 擴展屬性

此模塊須要注意瀏覽器兼容配置，參見.babelrc

seo優化思路

組件支持：vue-server-renderer

實現原理：請求發起->server.js->服務器生成數據返回->瀏覽器端接收數據後比對本地生成數據是否一致（虛擬dom），若是是則進行掛載

網絡請求

統一使用axio實現先後端請求，使用cookie注入state方式進行先後端 ssr cookie同步及相關數據傳遞

動態meta

步驟：

一、在路由配置中注入meta

二、在每一個頁面js中配置metaInfo（使用mixin進行公共管理）