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:海豚湾-丰

  

上一篇:Javascript 事件对象(六)事件默认行为


下一篇:ASP.NET Core 与 Vue.js 服务端渲染