少掉配置SSR的烦恼，Koa-vuessr-middlware帮你忙

VPointer 发布于2019-08-23 13:08 / 947人阅读

摘要：前言最近在写一个新应用时，想用结合，同时写接口和页面，于是开始上手写，结果发现需要写的东西很多，参考的大多数例子都用的是十分类似的代码好像大多都是基于尤大大的，于是索性花了一个晚上把代码封装成一个的中间件，让后来者少造个轮子各位看官，走过路

前言

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

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

示例

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

安装

npm install koa-vuessr-middleware

文档

使用

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

{
  "template": "./src/index.template.html",
  "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"
  }
}

说明：

template 默认网页模板，默认为空，即使用内置的网页模板

entry 如果你想使用内置默认webpack 配置，则必须配置此项，包括一个client 和 server，client 为客户端入口js， server 则为服务端入口js

output 如果你想使用内置默认webpack 配置，则需要配置一个path 和outputPath，可以参考 webpack 的output 配置

webpackConfig 如果你想用自定义的webpack 配置，则需要配置以下两项：

client 客户端版本的webpack 配置文件

server 服务端版本的webpack 配置文件

注：可以在项目地址中参考相应的配置文件进行编写

基本用法如下：

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, // 此时将启用热更新功能，此为默认选项,
}));

生产环境

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

buildssr

然后使用以下代码

router.get("*", ssr(app, {
    title: "网页默认标题",
    isProd: true, // 此时将直接读取生产代码,
}));

文件目录建议如下例子：

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

GPU云服务器云服务器帮你忙阿里云香港服务器配置ssr 烦恼少掉坑

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99235.html

5个优秀编码挑战帮你训练大脑，你敢尝试吗？

摘要：可能是世界上最受欢迎的编码挑战网站，自十多年前首次推出以来它一直都是几十万用户的家。在线评测是成千上万的编码挑战的宝库，这让你忙上几个星期。允许用户添加自己的挑战，组织编程竞赛，并争取最高的排名。原文地址：https://www.evget.com/article...每个人都知道编程正在成为几乎每个行业的重要组成部分，它对组织的帮助和对大型系统的维护是独一无二的，因此越来越多的人开...

makeFoxPlay 2019-08-20 14:42 评论0 收藏0
浅谈NUXT - 基于vue.js的服务端渲染框架

摘要：是一款基于的服务端渲染框架，跟的异曲同工。该配置项用于定义应用客户端和服务端的环境变量。 Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统，受到很多前端开发人员的青睐。国内很多公司都在使用vue进行项目开发，我们正在使用的简书，便是基于Vue来构建的。我们知道，SPA前端渲染存在两大痛点：（1）SEO。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息，使...

yearsj 2019-08-01 17:18 评论0 收藏0
浅谈NUXT - 基于vue.js的服务端渲染框架

摘要：是一款基于的服务端渲染框架，跟的异曲同工。该配置项用于定义应用客户端和服务端的环境变量。 Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统，受到很多前端开发人员的青睐。国内很多公司都在使用vue进行项目开发，我们正在使用的简书，便是基于Vue来构建的。我们知道，SPA前端渲染存在两大痛点：（1）SEO。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息，使...

godiscoder 2019-08-20 18:29 评论0 收藏0
精读《Caches API》

摘要：引言这个是针对的。一般结合使用，因为请求级别的缓存与具有页面拦截功能的最配。本周精读的文章是，介绍了浏览器缓存接口的基本语法。包含任意命名空间，可以通过创建或访问。精读笔者利用实现了纯浏览器端的后端渲染。前端精读帮你筛选靠谱的内容。 1 引言 caches 这个 API 是针对 Request Response 的。caches 一般结合 Service Worker 使用，因为请求级...

Null 2019-08-23 14:42 评论0 收藏0
企业在选择公有云时，摸清这五大定律少掉坑

摘要：根据发布的年上半年中国公有云市场份额报告显示，阿里云占据了的份额，排在第二位的腾讯云份额仅为。数据显示，阿里云的合作伙伴数量已经超过家，涵盖了咨询公司系统集成商主流。年，阿里云合作伙伴在云市场上的订单数超过万单。印象中，几年前公有云刚冒出来的时候，大众对这一新概念摸不着头脑，于是专业的吃瓜群众专门做了一份公有云的大众版定义，用通俗易懂的比喻来衡量是不是公有云。几年过去了，公有云的常识已经不用...

Cc_2011 2019-04-30 17:30 评论0 收藏0