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

栏目: Node.js · 发布时间: 5年前

内容简介:最近在写一个新应用时,想用Koa 结合 Vue SSR,同时写Api 接口和页面,于是开始上手写,结果发现需要写的东西很多,参考的大多数例子都用的是十分类似的代码(好像大多都是基于尤大大的各位看官,走过路过,给个star 鼓励一下吧,谢谢!如果以下的文档不够清晰,可以参考我写的

最近在写一个新应用时,想用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 配置,则必须配置此项,包括一个 clientserverclient 为客户端入口js, server 则为服务端入口js
  • output 如果你想使用内置默认webpack 配置,则需要配置一个 pathoutputPath ,可以参考 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)
  })
}
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

设计模式解析

设计模式解析

Alan Shalloway、James R.Trott / 徐言声 / 人民邮电出版社 / 2013-1 / 55.00元

《设计模式解析(第2版·修订版)》,本书首先概述了模式的基础知识,以及面向对象分析和设计在当代软件开发中的重要性,随后使用易懂的示例代码阐明了12个最常用的模式,使读者能够理解模式背后的基本原则和动机,理解为什么它们会这样运作。一起来看看 《设计模式解析》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换