未加星标

还在为部署Vue SSR烦恼?Koa-vuessr-middlware 了解一下

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

最近在写一个新应用时,想用Koa 结合 Vue SSR,同时写Api 接口和页面,于是开始上手写,结果发现需要写的东西很多,参考的大多数例子都用的是十分类似的代码(好像大多都是基于尤大大的 hackernews ),于是索性花了一个晚上把代码封装成一个Koa 的中间件,让后来者少造个轮子;

各位看官,走过路过,给个star 鼓励一下吧,谢谢! 项目地址


还在为部署Vue SSR烦恼?Koa-vuessr-middlware 了解一下
示例

如果以下的文档不够清晰,可以参考我写的 Demo 进行参考

安装 npm install koa-vuessr-middleware 复制代码

文档

使用

首先需要在项目根目录下添加一个 .ssrconfig 文件,内容如下:

{ "ouput": { "path": "./dist", "publicPath": "/dist/" }, "entry": { "client": "./src/entry-client.js", "server": "./src/entry-server.js" }, "webpackConfig": { "client": "./build/webpack.client.conf.js", "server": "./build/webpack.server.conf.js" } } 复制代码

说明:

entry 如果你想使用内置默认webpack 配置,则必须配置此项,包括一个 client 和 server , client 为客户端入口js, server 则为服务端入口js output 如果你想使用内置默认webpack 配置,则需要配置一个 path 和 outputPath ,可以参考 webpack 的output 配置 webpackConfig 如果你想用自定义的webpack 配置,则需要配置以下两项: client server 注:可以在项目地址中参考相应的配置文件进行编写

基本用法如下:

const koa = require('koa'); const app = new koa(); const koaRouter = require('koa-router'); const ssr = require('koa-vuessrr-middleware'); router.get('/otherroute', otherloaders); router.get('*', ssr(app, opts)); app.use(router.routes()); app.listen(8080); 复制代码 开发环境 router.get('*', ssr(app, { title: '网页默认标题', isProd: false, // 此时将启用热更新功能,此为默认选项, templatePath: './index.template.html' // 渲染默认模板地址,如果不提供则会使用内置的默认模板 })); 复制代码 生产环境

先执行以下命令生成生产代码

buildssr 复制代码

然后使用以下代码

router.get('*', ssr(app, { title: '网页默认标题', isProd: true, // 此时将直接读取生产代码, templatePath: './index.template.html' // 渲染默认模板地址,如果不提供则会使用内置的默认模板 })); 复制代码

文件目录建议如下例子:

├── src app directory │ ├── router/ route directory │ ├── views/ views directory │ ├── components/ compoennts directory │ ├── app.js js file to export a createApp function │ ├── App.vue root Vue │ ├── entry-server.js server side entry point │ └── entry-client.js client side entry point ├── index.js server entry point ├── .ssrconfig SSR configuration file ├── ... 复制代码

app.js 示例

import Vue from 'vue' import App from './App.vue' import { createRouter } from './router' import titleMixin from './util/title' Vue.mixin(titleMixin) export function createApp () { const router = createRouter() const app = new Vue({ router, render: h => h(App) }) return { app, router, } } 复制代码

entry-client.js 示例

import Vue from 'vue' import 'es6-promise/auto' import { createApp } from './app' const { app, router } = createApp() router.onReady(() => { app.$mount('#app') }) 复制代码

entry-server.js 示例

import { createApp } from './app'; export default context => { return new Promise((resolve, reject) => { const { app, router } = createApp() const { url } = context const { fullPath } = router.resolve(url).route if (fullPath !== url) { return reject({ url: fullPath }) } router.push(url) router.onReady(() => { const matchedComponents = router.getMatchedComponents() if (!matchedComponents.length) { return reject({ code: 404 }) } Promise.all(matchedComponents.map(({ asyncData }) => asyncData)).then(() => { resolve(app) }).catch(reject) }, reject) }) } 复制代码

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:还在为部署Vue SSR烦恼?Koa-vuessr-middlware 了解一下
本站链接:https://www.codesec.net/view/611609.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(75)