普通vue-cli初始项目转为服务端渲染SSR

最新推荐文章于 2023-08-03 09:52:18 发布

登楼痕

最新推荐文章于 2023-08-03 09:52:18 发布

阅读量857

点赞数 1

分类专栏：前端开发文章标签： vue nodejs

本文链接：https://blog.csdn.net/denglouhen/article/details/109898542

版权

1、第一步没啥好说的，利用vue-cli脚手架创建一个demo项目：

vue init webpack vue-ssr-demo
cd vue-ssr-demo
npm install

2、安装SSR依赖的模块：

npm i -D vue-server-renderer

3、随便加一个components/test.vue

<template>
  <div>
    Just a test page.
 </div>
</template>
<script>
 export default {
 data () {
 return {
   }
  }
 }
</script>

4、src目录下创建俩js文件：

src
├── entry-client.js # 仅运行于浏览器
└── entry-server.js # 仅运行于服务器

5、修改router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export function createRouter () {
  return new Router({
    mode: 'history', // 注意这里也是为history模式
    routes: [
      {
        path: '/',
        name: 'Hello',
        component: HelloWorld
      }, {
        path: '/test',
        name: 'Test',
        component: () => import('@/components/test') // 异步组件
      }
    ]
  })
}

6、修改main.js里路由的引入：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import { createRouter } from './router'

export function createApp () {
  // 创建 router 实例
  const router = new createRouter()
  const app = new Vue({
    // 注入 router 到根 Vue 实例
    router,
    render: h =&