# vue-cli3-ssr-demo

**Repository Path**: jaqi/vue-cli3-ssr-demo

## Basic Information

- **Project Name**: vue-cli3-ssr-demo
- **Description**: 基于 Vue-Cli3 改造的 VUE-SSR 服务端渲染项目。
支持AXIOS、ElementUI、Vant、Vuex、TDK设置。
支持在阿里云部署。
项目源码来自https://github.com/ediaos/vue-cli3-ssr-project
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-07-30
- **Last Updated**: 2022-05-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-cli3-ssr-demo

基于 Vue-Cli3 改造的 SSR 服务端渲染项目。

- 基于 Cli3 进行改造的前后端渲染项目
- 支持最新的 Vue 版本 v2.6.0+ , 支持 serverPrefetch
- 支持通过配置决定 Page 是否服务端渲染
- 使用 KOA 作为 server 端框架
- PM2 配置支持
- 支持前端渲染基于路由变更后再请求数据，用户体验更好
- 优化基于 cli3 的环境配置，改为 config 文件中配置，包括 cdn 地址支持
- 优化 dev 开发 ssr，通过双启动(ssr-server & client-dev-server)方式，实现前后端 dev 开发无感知,解决方案更加优雅
- SEO 的支持，支持 tkd 以及 head 附加
- 支持添加robots.txt文件

## 项目安装

```
npm install
```

### 本地启动客户端渲染

```
npm run dev:client
```

### 构建

```
npm run build
```

### 运行服务端渲染

```
npm run dist
```

具体配置详见个文件

::: warning
- 服务端渲染的页面不能使用window、document等标签；
- 不能使用vue-cookier、vuex-persistedstate；
- 缓存可以使用localstorage；
- mapState返回的数据直接渲染，不能再赋值给其他遍历渲染；
- 服务端API需要使用绝对路径；
:::