Vue（SPA） WebPack模块化打包、SEO优化（Vue SSR服务端同构直出）、全浏览器兼容完整解决方案

白驹过隙，时光荏苒

   　大概去年这个时候写了angular 结合webpack的一套前端方案，今年此时祭出vue2结合webpack的一套前端方案。

       明年的这个时候我又是在做什么...

读在最前面：

　　1、本文讲述Vue，Webpack 模块化、SEO优化（Vue SSR 服务端同构直出）、全浏览器兼容（ie8以上）、图片轮播等案例方案

       2、技术点：vue、webpack、es6、vue-server-renderer、sass、autoprefixer、vue-meta、axios

　　3、阅读本文，读者应了解Vue、WebPack，有一定的前端基础

　　4、此文建立在已有node环境，sass环境，webpack环境下，特此说明

　　5、以下对关键代码进行描述解析，下载完整项目，请拉到最底部！

 

构建Vue，Fire！

1、目录结构

（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                    #项目启动入口

2、创建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 }

3、创建路由配置文件，/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
})

 3、创建数据仓库配置文件，/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

步骤：

1、在路由配置中注入meta

2、在每个页面js中配置metaInfo（使用mixin进行公共管理）

3、在entry-server.js中获取app..$meta()，注入context

4、index.html页面显示meta

 图片轮播

思路：结合jquery + css + 原生定时实现

 ie9路由跳转异常

解决此问题在/router/index.js 配置路由时，配置 fallback: false

 ie9跨域请求异常

解决此问题需要使用代理配置客户端请求api接口

 

猛击下载源码

　　　　

 by：海豚湾-丰