基于vue-cli项目添加服务端渲染
其他
2018-07-06 10:30:15
阅读次数: 0
两个示例的git地址:
1. 我的环境
2. 方式一：使用prerender-spa-plugin插件获得SSR的效果。
2.1 说明
2.2 初始化
1
|
vue init webpack vue-prerender-demo //此文章都是在webpack基础上配置的
|
1
2
3
|
cd vue-prerender-demo
npm install
npm run dev
|
2.3 配置
2.4 开始
1. 安装 prerender-spa-plugin， 因为依赖phantom js，phantom 的安装比较蛋疼，太耗时了~
1
|
npm install prerender-spa-plugin -D
|
2. 开始 prerender 相关的配置：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
|
3. 编译
4. 验证
1
2
|
cd dist //进入到对应目录
python -m SimpleHTTPServer 8888 //将dist作为根目录，启动8888端口，
|
2.5 优缺点
3. 方式二：使用官方提供的轮子在node端做SSR
3.1 说明
3.2 约束
3.3 准备工作
1
|
vue init webpack vue-ssr-demo
|
1
2
3
|
cd vue-ssr-demo
npm install
npm run dev
|
3.4 开始折腾
1. 首先安装 ssr 支持
1
|
npm i -D vue-server-renderer
|
2. 增加路由test与页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<template>
<div>
Just a test page.
<div>
<router-link to="/">Home</router-link>
</div>
<div><h2>{{mode}}</h2></div>
<div><span>{{count}}</span></div>
<div><button @click="count++">+1</button></div>
</div>
</template>
<script>
export default {
data () {
return {
mode: process.env.VUE_ENV === 'server' ? 'server' : 'client',
count: 2
}
}
}
</script>
|
3. 在src目录下创建两个js:
1
2
3
|
src
├── entry-client.js # 仅运行于浏览器
└── entry-server.js # 仅运行于服务器
|
4. 修改router配置。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
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', |
5. 改造main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
import Vue from 'vue'
import App from './App'
import { createRouter } from './router'
export function createApp () {
|
6. entry-client.js加入以下内容：
1
2
3
4
5
6
|
import { createApp } from './main'
const { app, router } = createApp()
|
7. entry-server.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
|
8. webpack配置
1
2
3
4
|
build
├── webpack.base.conf.js # 基础通用配置
├── webpack.client.conf.js # 客户端打包配置
└── webpack.server.conf.js # 服务器端打包配置
|
9. webpack 客户端的配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
|
10. webpack 服务器端的配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
const webpack = require('webpack')
const merge = require('webpack-merge')
const nodeExternals = require('webpack-node-externals')
const baseConfig = require('./webpack.base.conf.js')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
|
1
|
baseConfig.module.rules[1].options = '' |
11. 配置package.json增加打包服务器端构建命令并修改原打包命令
1
2
3
4
5
6
|
"scripts": {
//...
"build:client": "node build/build.js",
"build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.conf.js --progress --hide-modules",
"build": "rimraf dist && npm run build:client && npm run build:server"
}
|
12. 修改index.html
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-ssr-demo</title>
</head>
<body>
|
13. 运行构建命令
14. 构建服务器端(官方例子使用的express，所以此 demo 将采用koa2来作为服务器端，当然，无论是 koa 与 express 都不重要…)
1
2
3
4
5
6
7
8
9
|
const Koa = require('koa')
const app = new Koa()
|
15. 编写服务端代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
const Koa = require('koa')
const app = new Koa()
const fs = require('fs')
const path = require('path')
const { createBundleRenderer } = require('vue-server-renderer')
const resolve = file => path.resolve(__dirname, file)
|
16. 大功告成
3.4 优缺点
转载自www.cnblogs.com/axl234/p/9272118.html