Vue（SPA） WebPack模块化打包、SEO优化（Vue SSR服务端同构直出

发布时间：2020-12-16 23:15:13 所属栏目：百科来源：网络整理

导读：p class="jhl-title"span class="Apple-converted-space" 白驹过隙，时光荏苒 ? ? 大概去年这个时候写了的一套前端方案，今年此时祭出vue2结合webpack的一套前端方案。 ? ? ? ?明年的这个时候我又是在做什么... 读在最前面： 1、本文讲述Vue，Webpack 模块

<p class="jhl-title"><span class="Apple-converted-space">白驹过隙，时光荏苒

? ?　大概去年这个时候写了的一套前端方案，今年此时祭出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、以下对关键代码进行描述解析，下载完整项目，请拉到最底部！

<p class="jhl-title">构建Vue，Fire！

<p class="jhl-item">1、目录结构

（1）、页面结构采用单一结构，分离js、css、vue、路由

（2）、数据仓库结构分离actions、mutations、getters

（1）、第三方样式依赖：阿里iconfont

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

（3）、路由、数据仓库依赖：/router/index.js，/store/index.js

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

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

export { app,router,store }

（1）、结合vue-meta实现动态meta

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
})

Vue.use(Vuex)

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

此模块需要注意浏览器兼容配置，参见.babelrc

组件支持：vue-server-renderer

实现原理：请求发起->server.js->服务器生成数据返回->浏览器端接收数据后比对本地生成数据是否一致（虚拟dom），如果是则进行挂载

统一使用axio实现前后端请求，使用cookie注入state方式进行前后端 ssr cookie同步及相关数据传递

步骤：

1、在路由配置中注入meta

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

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

4、index.html页面显示meta

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!