Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f7c5438

Browse files
ssr
1 parent 528cdf2 commit f7c5438

File tree

26 files changed

+768
-0
lines changed

26 files changed

+768
-0
lines changed
Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// https://ssr.vuejs.org/zh/
2+
3+
const Vue = require('vue')
4+
const server = require('express')()
5+
const renderer = require('vue-server-renderer').createRenderer()
6+
7+
server.get('*', (req, res) => {
8+
const app = new Vue({
9+
data: {
10+
name: 'csxiaoyao'
11+
},
12+
template: `<div>{{ name }}</div>`,
13+
created: function () {
14+
console.log('name is: ' + this.name)
15+
}
16+
})
17+
18+
renderer.renderToString(app, (err, html) => {
19+
if (err) {
20+
res.status(500).end('Internal Server Error')
21+
return
22+
}
23+
res.end(`
24+
<!DOCTYPE html>
25+
<html lang="en">
26+
<head><title>Hello</title></head>
27+
<body>${html}</body>
28+
</html>
29+
`)
30+
})
31+
32+
})
33+
34+
server.listen(8080)
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
const Vue = require('vue');
2+
const server = require('express')();
3+
4+
const template = require('fs').readFileSync('./index.template.html', 'utf-8');
5+
6+
const renderer = require('vue-server-renderer').createRenderer({
7+
template,
8+
});
9+
10+
const context = {
11+
title: 'vue ssr',
12+
metas: `
13+
<meta name="keyword" content="vue,ssr">
14+
<meta name="description" content="vue srr demo">
15+
`,
16+
};
17+
18+
server.get('*', (req, res) => {
19+
const app = new Vue({
20+
data: {
21+
url: req.url
22+
},
23+
template: `<div>访问的 URL 是: {{ url }}</div>`,
24+
});
25+
26+
renderer.renderToString(app, context, (err, html) => {
27+
console.log(html);
28+
if (err) {
29+
res.status(500).end('Internal Server Error')
30+
return;
31+
}
32+
res.end(html);
33+
});
34+
})
35+
36+
server.listen(8080);
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// 由于没有动态更新,所有的生命周期钩子函数中
2+
// 只有 beforeCreate 和 created 会在服务器端渲染 (SSR) 过程中被调用
3+
// 这就是说任何其他生命周期钩子函数中的代码(例如 beforeMount 或 mounted),只会在客户端执行
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const Vue = require('vue')
2+
3+
module.exports = function createApp (context) {
4+
return new Vue({
5+
data: {
6+
url: context.url
7+
},
8+
template: `<div>访问的 URL 是: {{ url }}</div>`,
9+
created () {
10+
this.url += '~~~'
11+
}
12+
})
13+
}
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const createApp = require('./app')
2+
const server = require('express')();
3+
const template = require('fs').readFileSync('./index.template.html', 'utf-8');
4+
5+
const renderer = require('vue-server-renderer').createRenderer({
6+
template,
7+
});
8+
9+
server.get('*', (req, res) => {
10+
const context = { url: req.url }
11+
const app = createApp(context)
12+
13+
renderer.renderToString(app, (err, html) => {
14+
// 处理错误......
15+
res.end(html)
16+
})
17+
})
18+
19+
server.listen(8080);
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
2+
```
3+
src
4+
├── components
5+
│ ├── Foo.vue
6+
│ ├── Bar.vue
7+
│ └── Baz.vue
8+
├── App.vue
9+
├── app.js # 通用 entry(universal entry)
10+
├── entry-client.js # 仅运行于浏览器
11+
└── entry-server.js # 仅运行于服务器
12+
```

‎11-构建工具/04-ssr/vue-ssr/05-webpack-demo/src/App.vue

Whitespace-only changes.
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Vue from 'vue'
2+
import App from './App.vue'
3+
4+
// 导出一个工厂函数,用于创建新的
5+
// 应用程序、router 和 store 实例
6+
export function createApp () {
7+
const app = new Vue({
8+
// 根实例简单的渲染应用程序组件。
9+
render: h => h(App)
10+
})
11+
return { app }
12+
}

‎11-构建工具/04-ssr/vue-ssr/05-webpack-demo/src/components/Bar.vue

Whitespace-only changes.

‎11-构建工具/04-ssr/vue-ssr/05-webpack-demo/src/components/Baz.vue

Whitespace-only changes.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /