手把手打造 vue ssr

提示：后续更加完善

---

SSR概念

全称: server side render
传统web渲染技术 asp .net php jsp

实现vue ssr具体过程

创建工程 vue cli 3

vue create ssr

安装依赖

渲染器 vue-server-renderer
nodejs服务器 express

npm i vue-server-render express -D

编写服务端启动脚本

创建一个express服务器，将vue ssr集成进来，./server/index.js

路由

安装vue-router

npm i vue-router -s

配置

创建./src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../components/Index'
import Detail from "@/components/Detail";

Vue.use(VueRouter)

const routes = [
  {
   
    path: '/',
    name: 'Index',
    component: Index
  },
  {
   
    path: '/detail',
    name: 'Detail',
    component: Detail,
  }
]

/*
* 这里为什么不导出一个router实例哪?
* 每次用户请求都需要创建router实例
* */
export default function createRoute() {
   
  return new VueRouter({
   
    mode: 'history',
    base: process.env.BASE_URL,
    routes
  })
}

创建 ./src/components/Index.vue、 ./src/components/Detail.vue

<template>
  <div>
    Index Page
  </div>
</template>

<script>
export default {
  name: "DetailPage"
}
</script>

<style scoped>

</style>

<template>
  <div>
    Detail Page
  </div>
</template>

<script>
export default {
  name: "DetailPage"
}
</s