现有vue-cli3搭建的vue项目改ssr服务器渲染

项目简介

vue+node+koa2

安装ssr依赖

npm install vue-server-renderer webpack-node-externals cross-env --save-dev
npm install koa koa-static vuex-router-sync --save

目录结构

其中[entry-client.js] [entry-server.js] [index.template.html] [server.js]为新增文件
目录结构
文件内容

【entry-client.js】

import createApp from "./main";

const { app, router, store } = createApp(window);

if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__);
}

router.onReady(() => {
  // 添加路由钩子函数,用于处理 asyncData.
  // 在初始路由 resolve 后执行,
  // 以便我们不会二次预取(double-fetch)已有的数据。
  // 使用 `router.beforeResolve()`,以便确保所有异步组件都 resolve。
  router.beforeResolve((to, from, next) => {
    const matched = router.getMatchedComponents(to);
    const prevMatched = router.getMatchedComponents(from);

    // 我们只关心非预渲染的组件
    // 所以我们对比它们,找出两个匹配列表的差异组件
    let diffed = false;
    const activated = matched.filter((c, i) => {
      return diffed || (diffed = prevMatched[i] !== c);
    });

    if (!activated.length) {
      return next();
    }

    // 这里如果有加载指示器 (loading indicator),就触发

    Promise.all(
      activated.map((c) => {
        if (c.asyncData) {
          return c.asyncData({ store, route: to });
        }
      })
    )
      .then(() => {
        // 停止加载指示器(loading indicator)

        next();
      })
      .catch(next);
  });

  app.$mount("#app");
});

【entry-server.js】

import createApp from "./main";

export default context => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp();
    // 注入用户信息
    if(context.userInfo) {
        store.state.userInfo = JSON.parse(context.userInfo)
        store.state.token = store.state.userInfo.token
    }
    router.push(context.url);
    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents();
      if (!matchedComponents.length) {
          
        return reject({ code: 404 });
      }

      // 对所有匹配的路由组件调用 `asyncData()`
      Promise.all(
        matchedComponents.map((Component) => {
            if (Component.asyncData) {
                return Component.asyncData({
                    store,
                    route: router.currentRoute
                });
            }
        })
      ).then(() => {
          // 在所有预取钩子(preFetch hook) resolve 后,
          // 我们的 store 现在已经填充入渲染应用程序所需的状态。
          // 当我们将状态附加到上下文,
          // 并且 `template` 选项用于 renderer 时,
          // 状态将自动序列化为 `window.__INITIAL_STATE__`,并注入 HTML。
          // 动态TDK
          context.title = store.state.title + ' - ' + store.state.globalConfig.public.seotitle;
          context.keywords = store.state.globalConfig.public.keyword
          context.description = store.state.globalConfig.public.description
          context.state = store.state
          resolve(app);
        })
        .catch(reject);
    }, reject);
  });
};

【index.template.html】

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="keywords" content="{{keywords}}">
    <meta name="description" content="{{description}}">
    <title>{{title}}</title>
  </head>
  <body>
    <!--vue-ssr-outlet-->
  </body>
</html>

【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/client")));

// 第 2 步:获得一个createBundleRenderer
const { createBundleRenderer } = require("vue-server-renderer");
const serverBundle = require("./dist/server/vue-ssr-server-bundle.json");
const clientManifest = require("./dist/client/vue-ssr-client-manifest.json");

const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false,
  template: fs.readFileSync(
    path.resolve(__dirname, "./src/index.template.html"),
    "utf-8"
  ),
  clientManifest,
});

function renderToString(context) {
  return new Promise((resolve, reject) => {
    renderer.renderToString(context, (err, html) => {
      err ? reject(err) : resolve(html);
    });
  });
}

function getCookie(cookie) {
    let cookieObj = {}
    let cookies = cookie ? cookie.split(';') : []
    if (cookies.length > 0) {
        cookies.forEach(item => {
            if (item) {
                let cookieArray = item.split('=')
                if (cookieArray && cookieArray.length > 0) {
                    let key = cookieArray[0].trim()
                    let value = cookieArray[1] ? cookieArray[1].trim() : undefined
                    cookieObj[key] = value
                }
            }
        })
    }
    return cookieObj
}

// 第 3 步:添加一个中间件来处理所有请求
app.use(async (ctx, next) => {
  const context = {
    title: "默认title",
    url: ctx.url,
  };
  // cgi请求,前端资源请求不能转到这里来。这里可以通过nginx做
  if (/\.\w+$/.test(context.url)) {
    return next
  }
  const cookieObj = getCookie(ctx.header.cookie)
  if(cookieObj.userInfo) {
    context.userInfo = decodeURIComponent(cookieObj.userInfo)
  }
  // 将 context 数据渲染为 HTML
  const html = await renderToString(context);
  ctx.body = html;
});


/*服务启动*/
const port = 3000;
app.listen(port, function() {
  console.log(`server started at localhost:${port}`);
})

其中[store.js] [router.js] [main.js] [action.js] [vue.config.js] [package.json]需要进行修改
文件修改内容

【store.js】

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from "./vuex/mutations"
import actions from './vuex/actions'
Vue.use(Vuex)
export default function createStore() {
    return new Vuex.Store({
        state: {
            token: null,
            userInfo: {},
            homeData: {},
            title: ''
        },
        mutations,
        actions
    })
}

【router.js】

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const routes = [
    {
        path: '/',
        component: () => import('./views/index'),
        children: [
            {
                path: '/',
                name: 'index',
                component: () => import('./views/home')
            }
            {
                path: 'login',
                name: 'login',
                component: () => import('./views/login')
            },
            {
                path: 'user',
                name: 'user',
                component: () => import('./views/user')
            }
        ]
    }
]
export default function createRouter() {
    return new Router({
        mode: 'history',
        base: process.env.BASE_URL,
        routes,
        scrollBehavior (to, from, savedPosition) {
            return { x: 0, y: 0 }
        }
    })
}

【main.js】

import Vue from 'vue'
import App from './App.vue'
import './assets/less/base.less'
import createRouter from "./router";
import createStore from "./store";
import { sync } from "vuex-router-sync"

Vue.config.productionTip = false

Vue.prototype.$routerOpen = (page) => {
    const router = createRouter()
    let routeUrl = router.resolve(page)
    //    window.open(routeUrl.href, '_blank')
    window.location.href = routeUrl.href
}
export default function createApp(window) {
    // 创建 router 和 store 实例
    const router = createRouter();
    const store = createStore(window);
  
    // 同步路由状态(route state)到 store
    sync(store, router);
  
    const app = new Vue({
        router,
        store,
        render: h => h(App)
    }).$mount('#app')
    return { app, router, store };
  }

【action.js】

import { homeCase, homeHotProjects, homeHotState, newslist } from '@/api/request'
const actions = {
    getHomeData({ commit }) {
        return Promise.all([homeCase(), homeHotProjects(), homeHotState(), newslist()]).then(res => {
            commit('getHomeData', res)
        })
    }
}
export default actions

【vue.config.js】

/*
 * @Author: your name
 * @Date: 2020-07-01 17:17:36
 * @LastEditTime: 2020-12-24 11:09:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \immigrant\vue.config.js
 */
const VueSSRServerPlugin = require("vue-server-renderer/server-plugin");
const VueSSRClientPlugin = require("vue-server-renderer/client-plugin");
const nodeExternals = require("webpack-node-externals");
const env = process.env;
const isServer = env.RUN_ENV === "server";

module.exports = {
    publicPath: './',
    lintOnSave: false, //是否开启eslint
    devServer: {
        disableHostCheck: true,
        proxy: {
            '/localhost': {
                target: 'http://xxx.com', //API服务器的地址
                changeOrigin: true, // 虚拟的站点需要更管origin
                pathRewrite:{
                    '^/localhost':''
                }
            }
        },
    },
    outputDir: `dist/${env.RUN_ENV}`,
    configureWebpack: {
        // 将 entry 指向应用程序的 server / client 文件
        entry: `./src/entry-${env.RUN_ENV}.js`,
        devtool: "eval",
        // 这允许 webpack 以 Node 适用方式(Node-appropriate fashion)处理动态导入(dynamic import),
        // 并且还会在编译 Vue 组件时,
        // 告知 `vue-loader` 输送面向服务器代码(server-oriented code)。
        target: isServer ? "node" : "web",
        // 此处告知 server bundle 使用 Node 风格导出模块(Node-style exports)
        output: {
          libraryTarget: isServer ? "commonjs2" : undefined,
        },
        // https://webpack.js.org/configuration/externals/#function
        // https://github.com/liady/webpack-node-externals
        // 外置化应用程序依赖模块。可以使服务器构建速度更快,
        // 并生成较小的 bundle 文件。
        externals: isServer
          ? nodeExternals({
            // 不要外置化 webpack 需要处理的依赖模块。
            // 你可以在这里添加更多的文件类型。例如,未处理 *.vue 原始文件,
            // 你还应该将修改 `global`(例如 polyfill)的依赖模块列入白名单
            allowlist: /\.css$/,
          })
          : undefined,
        optimization: { splitChunks: isServer ? false : undefined },
        // 这是将服务器的整个输出
        // 构建为单个 JSON 文件的插件。
        // 服务端默认文件名为 `vue-ssr-server-bundle.json`
        // 客户端默认文件名为 `vue-ssr-client-manifest.json`
        plugins: [isServer ? new VueSSRServerPlugin() : new VueSSRClientPlugin()],
    }
}

【package.json】

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "start": "npm run build:server && npm run build:client && npm run service",
    "build:client": "cross-env RUN_ENV=client vue-cli-service build",
    "build:server": "cross-env RUN_ENV=server vue-cli-service build --mode server",
    "service": "node server.js"
  }
组件中获取数据方式 (homeData可直接用于页面数据渲染)
export default {
    data() { 
        return {}
    },
    asyncData({store, route}) {
        return Promise.all([
            store.dispatch("getHomeData")
        ])
    },
    computed: {
        homeData() {
            return this.$store.state.homeData
        }
    }
}

运行

npm run start(编译加运行起服务)
npm run service(单独运行起服务)

注意

本文章本用于作者笔记,所以非常之简陋,如遇问题或有疑问可一起讨论研究。

运行问题

(1)编译失败提示依赖库版本不一致,根据报错提示重新安装依赖保证版本一致即可

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容