成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

VPointer / 1005人閱讀

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

前言

最近在寫一個(gè)新應(yīng)用時(shí)，想用Koa 結(jié)合 Vue SSR，同時(shí)寫Api 接口和頁(yè)面，于是開始上手寫，結(jié)果發(fā)現(xiàn)需要寫的東西很多，參考的大多數(shù)例子都用的是十分類似的代碼（好像大多都是基于尤大大的hackernews ），于是索性花了一個(gè)晚上把代碼封裝成一個(gè)Koa 的中間件，讓后來者少造個(gè)輪子；

各位看官，走過路過，給個(gè)star 鼓勵(lì)一下吧，謝謝！項(xiàng)目地址

示例

如果以下的文檔不夠清晰，可以參考我寫的Demo 進(jìn)行參考

安裝 
npm install koa-vuessr-middleware

文檔

使用

首先需要在項(xiàng)目根目錄下添加一個(gè).ssrconfig 文件，內(nèi)容如下：

{
  "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 默認(rèn)網(wǎng)頁(yè)模板，默認(rèn)為空，即使用內(nèi)置的網(wǎng)頁(yè)模板

entry 如果你想使用內(nèi)置默認(rèn)webpack 配置，則必須配置此項(xiàng)，包括一個(gè)client 和 server，client 為客戶端入口js， server 則為服務(wù)端入口js

output 如果你想使用內(nèi)置默認(rèn)webpack 配置，則需要配置一個(gè)path 和outputPath，可以參考 webpack 的output 配置

webpackConfig 如果你想用自定義的webpack 配置，則需要配置以下兩項(xiàng)：

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

server 服務(wù)端版本的webpack 配置文件

注：可以在項(xiàng)目地址中參考相應(yīng)的配置文件進(jìn)行編寫

基本用法如下：

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

開發(fā)環(huán)境

router.get("*", ssr(app, {
    title: "網(wǎng)頁(yè)默認(rèn)標(biāo)題",
    isProd: false, // 此時(shí)將啟用熱更新功能，此為默認(rèn)選項(xiàng),
}));

生產(chǎn)環(huán)境

先執(zhí)行以下命令生成生產(chǎn)代碼

buildssr

然后使用以下代碼

router.get("*", ssr(app, {
    title: "網(wǎng)頁(yè)默認(rèn)標(biāo)題",
    isProd: true, // 此時(shí)將直接讀取生產(chǎn)代碼,
}));

文件目錄建議如下例子：

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99235.html

相關(guān)文章

  • 5個(gè)優(yōu)秀編碼挑戰(zhàn)幫你訓(xùn)練大腦，你敢嘗試嗎？

    摘要：可能是世界上最受歡迎的編碼挑戰(zhàn)網(wǎng)站，自十多年前首次推出以來它一直都是幾十萬用戶的家。在線評(píng)測(cè)是成千上萬的編碼挑戰(zhàn)的寶庫(kù)，這讓你忙上幾個(gè)星期。允許用戶添加自己的挑戰(zhàn)，組織編程競(jìng)賽，并爭(zhēng)取最高的排名。 原文地址：https://www.evget.com/article...每個(gè)人都知道編程正在成為幾乎每個(gè)行業(yè)的重要組成部分，它對(duì)組織的幫助和對(duì)大型系統(tǒng)的維護(hù)是獨(dú)一無二的，因此越來越多的人開...

    makeFoxPlay 評(píng)論0 收藏0

  • 淺談NUXT - 基于vue.js的服務(wù)端渲染框架

    摘要：是一款基于的服務(wù)端渲染框架，跟的異曲同工。該配置項(xiàng)用于定義應(yīng)用客戶端和服務(wù)端的環(huán)境變量。 Vue因其簡(jiǎn)單易懂的API、高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)，受到很多前端開發(fā)人員的青睞。國(guó)內(nèi)很多公司都在使用vue進(jìn)行項(xiàng)目開發(fā)，我們正在使用的簡(jiǎn)書，便是基于Vue來構(gòu)建的。 我們知道，SPA前端渲染存在兩大痛點(diǎn)：（1）SEO。搜索引擎爬蟲難以抓取客戶端渲染的頁(yè)面meta信息和其他SEO相關(guān)信息，使...

    yearsj 評(píng)論0 收藏0

  • 淺談NUXT - 基于vue.js的服務(wù)端渲染框架

    摘要：是一款基于的服務(wù)端渲染框架，跟的異曲同工。該配置項(xiàng)用于定義應(yīng)用客戶端和服務(wù)端的環(huán)境變量。 Vue因其簡(jiǎn)單易懂的API、高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)，受到很多前端開發(fā)人員的青睞。國(guó)內(nèi)很多公司都在使用vue進(jìn)行項(xiàng)目開發(fā)，我們正在使用的簡(jiǎn)書，便是基于Vue來構(gòu)建的。 我們知道，SPA前端渲染存在兩大痛點(diǎn)：（1）SEO。搜索引擎爬蟲難以抓取客戶端渲染的頁(yè)面meta信息和其他SEO相關(guān)信息，使...

    godiscoder 評(píng)論0 收藏0

  • 精讀《Caches API》

    摘要：引言這個(gè)是針對(duì)的。一般結(jié)合使用，因?yàn)檎?qǐng)求級(jí)別的緩存與具有頁(yè)面攔截功能的最配。本周精讀的文章是，介紹了瀏覽器緩存接口的基本語法。包含任意命名空間，可以通過創(chuàng)建或訪問。精讀筆者利用實(shí)現(xiàn)了純?yōu)g覽器端的后端渲染。前端精讀幫你篩選靠譜的內(nèi)容。 1 引言 caches 這個(gè) API 是針對(duì) Request Response 的。caches 一般結(jié)合 Service Worker 使用，因?yàn)檎?qǐng)求級(jí)...

    Null 評(píng)論0 收藏0

  • 企業(yè)在選擇公有云時(shí)，摸清這五大定律少掉坑

    摘要：根據(jù)發(fā)布的年上半年中國(guó)公有云市場(chǎng)份額報(bào)告顯示，阿里云占據(jù)了的份額，排在第二位的騰訊云份額僅為。數(shù)據(jù)顯示，阿里云的合作伙伴數(shù)量已經(jīng)超過家，涵蓋了咨詢公司系統(tǒng)集成商主流。年，阿里云合作伙伴在云市場(chǎng)上的訂單數(shù)超過萬單。印象中，幾年前公有云剛冒出來的時(shí)候，大眾對(duì)這一新概念摸不著頭腦，于是專業(yè)的吃瓜群眾專門做了一份公有云的大眾版定義，用通俗易懂的比喻來衡量是不是公有云。幾年過去了，公有云的常識(shí)已經(jīng)不用...

    Cc_2011 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<