白驹过隙,时光荏苒

 大概去年这个时候写了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:海豚湾-丰

  

Vue(SPA) WebPack模块化打包、SEO优化(Vue SSR服务端同构直出)、全浏览器兼容完整解决方案的更多相关文章

  1. Angular (SPA) WebPack模块化打包、按需加载解决方案完整实现

    文艺小说-?2F,言情小说-?3F,武侠小说-?9F long long ago time-1-1:A 使用工具,long long A ago time-1-2:A 使用分类工具,long long ...

  2. 总结Vue第三天:模块化和webpack模块化打包:

    总结Vue第三天:模块化和webpack模块化打包: 一.❀ 模块化 [导入import-----导出export] 1.为什么需要模块化? JavaScript 发展初期,代码简单地堆积在一起,只要 ...

  3. 模块化和webpack模块化打包

    模块化和webpack模块化打包: 一.❀ 模块化 [导入import-----导出export] 1.为什么需要模块化? JavaScript 发展初期,代码简单地堆积在一起,只要能顺利地从上往下一 ...

  4. 【分享】Vue 资源典藏(UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例)

    Vue 资源典藏,包括:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...

  5. React同构直出优化总结

    收录待用,修改转载已取得腾讯云授权 作者:郭林烁 joeyguo 原文地址 React 的实践从去年在 PC QQ家校群开始,由于 PC 上的网络及环境都相当好,所以在使用时可谓一帆风顺,偶尔遇到点小 ...

  6. Vue SPA 首屏加载优化实践

    写在前面 本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案! 我们以 vue-cli 工具为例,使用 vue-router 搭建SPA应用,UI框架选用 element-ui ...

  7. 用prerender-spa-plugin插件Vue项目优化SEO做ssr服务端渲染及预渲染

    今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小 ...

  8. [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍

    一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...

  9. 使用 PHP 来做 Vue.js 的 SSR 服务端渲染

    对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/se ...

随机推荐

  1. 基于SSM的Java Web应用开发原理初探

    SSM开发Web的框架已经很成熟了,成熟得以至于有点落后了.虽然如今是SOA架构大行其道,微服务铺天盖地的时代,不过因为仍有大量的企业开发依赖于SSM,本文简单对基于SSM的Java开发做一快速入门, ...

  2. vue 使用element-ui upload文件上传之后怎么清空

    首先上传组件中一定要绑定这两个属性: ref,和 :file-list,如果没有ref,即使 用 this.$refs.upload.clearFiles()也不行,因为这时候this.$refs为空 ...

  3. 使用AutoMapper实现Dto和Model的自由转换(下)

    书接上文.在上一篇文章中我们讨论了使用AutoMapper实现类型间1-1映射的两种方式——Convention和Configuration,知道了如何进行简单的OO Mapping.在这个系列的最后 ...

  4. Codeforces ECR50 div2题解

    A:签到 #include<iostream> #include<cstdio> #include<cmath> #include<cstdlib> # ...

  5. kubernetes部署

    [自动安装] 一:操作环境 操作系统    centos7 防火墙selinux #systemctl stop firewalld && systemctl disable fire ...

  6. 【bzoj3224】 Tyvj1728—普通平衡树

    http://www.lydsy.com/JudgeOnline/problem.php?id=3224 (题目链接) 题意 1. 插入x数:2. 删除x数(若有多个相同的数,因只删除一个):3. 查 ...

  7. 前端学习 -- Css -- 样式的继承

    像儿子可以继承父亲的遗产一样,在CSS中,祖先元素上的样式,也会被他的后代元素所继承, 利用继承,可以将一些基本的样式设置给祖先元素,这样所有的后代元素将会自动继承这些样式. 但是并不是所有的样式都会 ...

  8. 《剑指offer》— JavaScript(31)整数中1出现的次数(从1到n整数中1出现的次数)

    整数中1出现的次数(从1到n整数中1出现的次数) 题目描述 求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12 ...

  9. Java基础-SSM之mybatis的统计函数和分页查询

    Java基础-SSM之mybatis的统计函数和分页查询 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.

  10. MySQL日志功能详解

    MySQL日志功能详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查询日志 它是用来保存所有跟查询相关的日志,这种日志类型默认是关闭状态的,因为MySQL的用户有很多,如果 ...