生活_傻大方

  1. 首页 > 人文 > >

深入浅出通过vue-cli3构建一个SSR应用程序【实践】( 二 )


// main.jsimport Vue from 'vue'import App from './App.vue'import { createRouter } from "./router";// 导出一个工厂函数，用于创建新的// 应用程序、router 和 store 实例export function createApp () {const router = createRouter();const app = new Vue({router,// 根实例简单的渲染应用程序组件 。render: h => h(App)})return { app,router }}

  • 修改entry-client.js
客户端 entry 只需创建应用程序，并且将其挂载到 DOM 中
import { createApp } from './main'// 客户端特定引导逻辑……const { app } = createApp()// 这里假定 App.vue 模板中根元素具有 `id="app"`app.$mount('#app')
  • 修改entry-server.js
服务器 entry 使用 default export 导出函数，并在每次渲染中重复调用此函数 。
import { createApp } from "./main";export default context => {// 因为有可能会是异步路由钩子函数或组件，所以我们将返回一个 Promise，// 以便服务器能够等待所有的内容在渲染前，// 就已经准备就绪 。return new Promise((resolve, reject) => {const { app, router } = createApp();// 设置服务器端 router 的位置router.push(context.url);// 等到 router 将可能的异步组件和钩子函数解析完router.onReady(() => {const matchedComponents = router.getMatchedComponents();// 匹配不到的路由，执行 reject 函数，并返回 404if (!matchedComponents.length) {return reject({code: 404});}// Promise 应该 resolve 应用程序实例，以便它可以渲染resolve(app);}, reject);});};
  • 修改router.js
import Vue from 'vue'import Router from 'vue-router'import Home from './views/Home.vue'Vue.use(Router)export function createRouter(){return new Router({mode: 'history', //一定要是history模式routes: [{path: '/',name: 'home',component: Home},{path: '/about',name: 'about',component: () => import(/* webpackChunkName: "about" */ './views/About.vue')}]})}2、修改webpack配置在vue-cli3创建的vue项目，已经没有了之前的webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js 。那么如何进行webpack的配置呢？
在vue-cli官网上也说明了如何使用 。调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象，该对象将会被 webpack-merge 合并入最终的 webpack 配置 。
  1. 在项目根目录下，新建一个vue.config.js
// vue.config.jsconst VueSSRServerPlugin = require("vue-server-renderer/server-plugin");const VueSSRClientPlugin = require("vue-server-renderer/client-plugin");const nodeExternals = require("webpack-node-externals");const merge = require("lodash.merge");const TARGET_NODE = process.env.WEBPACK_TARGET === "node";const target = TARGET_NODE ? "server" : "client";module.exports = {css: {extract: false},configureWebpack: () => ({// 将 entry 指向应用程序的 server / client 文件entry: `./src/entry-${target}.js`,// 对 bundle renderer 提供 source map 支持devtool: 'source-map',target: TARGET_NODE ? "node" : "web",node: TARGET_NODE ? undefined : false,output: {libraryTarget: TARGET_NODE ? "commonjs2" : undefined},// https://webpack.js.org/configuration/externals/#function// https://github.com/liady/webpack-node-externals// 外置化应用程序依赖模块 。可以使服务器构建速度更快，// 并生成较小的 bundle 文件 。externals: TARGET_NODE? nodeExternals({// 不要外置化 webpack 需要处理的依赖模块 。// 你可以在这里添加更多的文件类型 。例如，未处理 *.vue 原始文件，// 你还应该将修改 `global`（例如 polyfill）的依赖模块列入白名单whitelist: [/\.css$/]}): undefined,optimization: {splitChunks: undefined},plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()]}),chainWebpack: config => {config.module.rule("vue").use("vue-loader").tap(options => {merge(options, {optimizeSSR: false});});}};
  1. 修改package，新增三个脚本来生成bundle.json
"build:client": "vue-cli-service build","build:server": "cross-env WEBPACK_TARGET=node vue-cli-service build --mode server","build:win": "npm run build:server && move dist\\vue-ssr-server-bundle.json bundle && npm run build:client && move bundle dist\\vue-ssr-server-bundle.json",
深入浅出通过vue-cli3构建一个SSR应用程序【实践】

文章插图
image
  1. 执行命令
npm run build:win【深入浅出通过vue-cli3构建一个SSR应用程序【实践】】在dist目录下会生成两个json文件
深入浅出通过vue-cli3构建一个SSR应用程序【实践】

文章插图
image
3.4 改造server.js 代码const fs = require("fs");const Koa = require("koa");const path = require("path");const koaStatic = require('koa-static')const app = new Koa();const resolve = file => path.resolve(__dirname, file);// 开放dist目录app.use(koaStatic(resolve('./dist')))// 第 2 步：获得一个createBundleRendererconst { createBundleRenderer } = require("vue-server-renderer");const bundle = require("./dist/vue-ssr-server-bundle.json");const clientManifest = require("./dist/vue-ssr-client-manifest.json");const renderer = createBundleRenderer(bundle, {runInNewContext: false,template: fs.readFileSync(resolve("./src/index.temp.html"), "utf-8"),clientManifest: clientManifest});function renderToString(context) {return new Promise((resolve, reject) => {renderer.renderToString(context, (err, html) => {err ? reject(err) : resolve(html);});});}// 第 3 步：添加一个中间件来处理所有请求app.use(async (ctx, next) => {const context = {title: "ssr test",url: ctx.url};// 将 context 数据渲染为 HTMLconst html = await renderToString(context);ctx.body = html;});const port = 3000;app.listen(port, function() {console.log(`server started at localhost:${port}`);});



上一篇：北京户口多少钱(北京户口先办后收费)

下一篇：狗一天吃多少狗粮(怎么辨认狗狗要驱虫了)