少掉配置SSR的煩惱，Koa-vuessr-middlware幫你忙

VPointer 發布于2019-08-23 13:08 / 1000人閱讀

摘要：前言最近在寫一個新應用時，想用結合，同時寫接口和頁面，于是開始上手寫，結果發現需要寫的東西很多，參考的大多數例子都用的是十分類似的代碼好像大多都是基于尤大大的，于是索性花了一個晚上把代碼封裝成一個的中間件，讓后來者少造個輪子各位看官，走過路

前言

最近在寫一個新應用時，想用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 煩惱少掉坑

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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