通过vue-cli3构建一个SSR应用程序的方法
1、前沿1.1、什么是SSRSSR(服务端渲染)顾名思义就是将页面在服务端渲染完成后在客户端直接展示。 1.2、客户端渲染与服务端渲染的区别 传统的SPA模式即客户端渲染的模式
SSR模式即服务端渲染模式 用户输入url访问页面 -> 服务端接收到请求 -> 将对应请求的数据渲染完一个网页 -> 返回给用户 1.3、为什么要使用SSR呢?ssr的好处官网已经给出,最有意思的两个优点如下:
1.4、SSR原理这是vue.js官方的SSR原理介绍图,从这张图片,我们可以知道:我们需要通过Webpack打包生成两份bundle文件:
不管你项目先前是什么样子,是否是使用vue-cli生成的。都会有这个构建改造过程。在构建改造这里会用到 vue-server-renderer 库,这里要注意的是 vue-server-renderer 版本要与Vue版本一样。 2、开始构建基于vue-cli3 的SSR应用程序 了解ssr原理后,来开始step by step搭建一个自己的SSR应用程序 安装vue-cli3全局安装vue-cli脚手架 创建一个vue项目 会进入到一个交互bash界面,按自己需要选择 一步一步回车,根据自己需要选择 运行项目 看到这个提示,说明成功了一半了,接下来进行后一半的改造。 3、进行SSR改造3.1 安装需要的包
3.2 在服务器中集成在项目根目录下新建一个server.js 安装koa2 在koa2集成ssr const Koa = require("koa");
const app = new Koa(); // 第 2 步:创建一个 renderer const renderer = require("vue-server-renderer").createRenderer(); // 第 3 步:添加一个中间件来处理所有请求 const port = 3000; 运行server.js 看到这个说明一个简单的ssr构建成功了。 不过到目前为止,我们并没有将客户端的.vue文件通过服务端进行渲染,那么如何将前端的.vue文件与后端node进行结合呢? 3.3 改造前端配置,以支持SSR1、修改源码结构
main.js 是我们应用程序的「通用 entry」。在纯客户端应用程序中,我们将在此文件中创建根 Vue 实例,并直接挂载到 DOM。但是,对于服务器端渲染(SSR),责任转移到纯客户端 entry 文件。app.js 简单地使用 export 导出一个 createApp 函数: // 导出一个工厂函数,用于创建新的
// 应用程序、router 和 store 实例 export function createApp () { const router = createRouter(); const app = new Vue({ router,// 根实例简单的渲染应用程序组件。 render: h => h(App) }) return { app } } 修改entry-client.js 客户端 entry 只需创建应用程序,并且将其挂载到 DOM 中 // 客户端特定引导逻辑……
const { app } = createApp() // 这里假定 App.vue 模板中根元素具有 修改entry-server.js 服务器 entry 使用 default export 导出函数,并在每次渲染中重复调用此函数。 export default context => {
// 因为有可能会是异步路由钩子函数或组件,所以我们将返回一个 Promise, // 以便服务器能够等待所有的内容在渲染前, // 就已经准备就绪。 return new Promise((resolve,reject) => { const { app,router,store } = createApp(); // 设置服务器端 router 的位置 // 等到 router 将可能的异步组件和钩子函数解析完 修改router.js Vue.use(Router)
export function createRouter(){ 2、修改webpack配置 在vue-cli3创建的vue项目,已经没有了之前的webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js。那么如何进行webpack的配置呢? 在官网上也说明了如何使用。 调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象,该对象将会被 合并入最终的 webpack 配置。 在项目根目录下,新建一个vue.config.js const VueSSRServerPlugin = require("vue-server-renderer/server-plugin");
const VueSSRClientPlugin = require("vue-server-renderer/client-plugin"); const nodeExternals = require("webpack-node-externals"); const merge = require("lodash.merge"); const TARGET_NODE = process.env.WEBPACK_TARGET === "node"; const target = TARGET_NODE ? "server" : "client"; module.exports = { 修改package,新增三个脚本来生成bundle.json 执行命令 在dist目录下会生成两个json文件 3.4 改造server.js 代码 const resolve = file => path.resolve(__dirname,file);
// 开放dist目录 app.use(koaStatic(resolve('./dist'))) // 第 2 步:获得一个createBundleRenderer const renderer = createBundleRenderer(bundle,{ function renderToString(context) { const port = 3000; 3.5 运行server.js访问localhost:3000,可以看到页面的数据都是又服务端渲染完成后返回的。到这一步已经基本算完成了SSR的构建了。 如果有问题的话,可以把dist目录下的index.html文件删了。避免直接访问到了该html文件。 4、集成vuex
Vue.use(Vuex)
export function createStore() { },mutations: { },actions: { } 修改main.js h(App)
});
return { app,router };
}
再次运行脚本构建 5、案例代码附上案例源码 欢迎star 6、总结到目前为止,仅仅是完成了SSR的基础部分,还有相关的 SSR热更新之类的问题还需要继续探索。如果有好的热更新方法欢迎发出了参考参考。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |