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

3.5 运行server.jsnode server.js访问 localhost:3000，可以看到页面的数据都是由服务端渲染完成后返回的。到这一步已经基本算完成了SSR的构建了。
如果有问题的话，可以把dist目录下的index.html文件删了。避免直接访问到了该html文件。

文章插图
image
4、集成vuex

修改store.js

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export function createStore() {return new Vuex.Store({state: {},mutations: {},actions: {}});}

修改main.js

import Vue from "vue";import App from "./App.vue";import { createRouter } from "@/router";import { createStore } from "@/store";export function createApp() {const router = createRouter();const store = createStore()// +const app = new Vue({router,store,// +render: h => h(App)});return { app, router,store };}

再次运行脚本构建

npm run build:winnode server.js5、案例代码

附上案例源码
https://github.com/lentoo/vue-cli-ssr-example 欢迎star

6、总结

到目前为止，仅仅是完成了SSR的基础部分，还有如何实现开发模式下热更新的内容，具体可以查看这篇文章：基于vue-cli3 SSR 程序实现热更新功能