Permalink
Browse files

a simplest vue ssr demo

  • Loading branch information...
njleonzhang committed Jul 24, 2018
0 parents commit ba5a0ef80757c2ad00b5095b791ba6f0980e0a27
Showing with 634 additions and 0 deletions.
  1. +1 −0 .gitignore
  2. +28 −0 build/webpack.base.conf.js
  3. +24 −0 build/webpack.client.conf.js
  4. +21 −0 build/webpack.server.conf.js
  5. +241 −0 dist/client-bundle.js
  6. +198 −0 dist/server-bundle.js
  7. +13 −0 index.template.html
  8. +25 −0 package.json
  9. +34 −0 server.js
  10. +23 −0 src/App.vue
  11. +12 −0 src/app.js
  12. +8 −0 src/entry-client.js
  13. +6 −0 src/entry-server.js
@@ -0,0 +1 @@
node_modules
@@ -0,0 +1,28 @@
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

const isProd = process.env.NODE_ENV === 'production'

module.exports = {
output: {
path: path.resolve(__dirname, '../dist'),
publicPath: '/dist/',
},
module: {
noParse: /es6-promise\.js$/, // avoid webpack shimming process
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
]
},
plugins: [
new VueLoaderPlugin()
],
}
@@ -0,0 +1,24 @@
const webpack = require('webpack')
const merge = require('webpack-merge')
const base = require('./webpack.base.conf')

const isProd = process.env.NODE_ENV === 'production'

const config = merge(base, {
entry: {
app: './src/entry-client.js'
},
output: {
filename: 'client-bundle.js'
},
mode: isProd ? 'production' : 'development',
plugins: [
// strip dev-only code in Vue source
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
'process.env.VUE_ENV': '"client"'
}),
]
})

module.exports = config
@@ -0,0 +1,21 @@
const webpack = require('webpack')
const merge = require('webpack-merge')
const base = require('./webpack.base.conf')

const isProd = process.env.NODE_ENV === 'production'

module.exports = merge(base, {
target: 'node',
entry: './src/entry-server.js',
output: {
filename: 'server-bundle.js',
libraryTarget: 'commonjs2'
},
mode: isProd ? 'production' : 'development',
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
'process.env.VUE_ENV': '"server"'
}),
]
})

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,13 @@
<html>
<head>
<!-- 使用双花括号(double-mustache)进行 HTML 转义插值(HTML-escaped interpolation) -->
<title>{{ title }}</title>

<!-- 使用三花括号(triple-mustache)进行 HTML 不转义插值(non-HTML-escaped interpolation) -->
{{{ meta }}}
</head>
<body>
<!--vue-ssr-outlet-->
<script src='/client-bundle.js'></script>
</body>
</html>
@@ -0,0 +1,25 @@
{
"scripts": {
"build:client": "cross-env NODE_ENV=dev webpack --config build/webpack.client.conf.js --progress --hide-modules",
"build:server": "cross-env NODE_ENV=dev webpack --config build/webpack.server.conf.js --progress --hide-modules",
"build": "rimraf dist && npm run build:client && npm run build:server",
"start": "node server"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"cross-env": "^5.2.0",
"express": "^4.16.3",
"rimraf": "^2.6.2",
"vue-loader": "^15.2.6",
"vue-server-renderer": "^2.5.16",
"vue-style-loader": "^4.1.1",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.16.1",
"webpack-cli": "^3.1.0",
"webpack-merge": "^4.1.3"
},
"dependencies": {
"vue": "^2.5.16"
}
}
@@ -0,0 +1,34 @@
const Vue = require('vue')
const express = require('express')
const server = express()
const createRenderer = require('vue-server-renderer').createRenderer
const app = require('./dist/server-bundle')

const renderer = createRenderer({
template: require('fs').readFileSync('./index.template.html', 'utf-8'),
})

server.use(express.static('dist'))


server.get('*', (req, res) => {
const context = {
title: 'hello',
meta: `
<meta charset="utf8">
`
}

renderer.renderToString(app.default(), context, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}

res.send(html)
})
})

server.listen(8080, () => {
console.log(`server started at localhost:8080`)
})
@@ -0,0 +1,23 @@
<template>
<div id='app'>
hello world
<div v-if='show'>show me</div>
<div>
<button @click='toggle'>toggle</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
show: true
}
},
methods: {
toggle() {
this.show = !this.show
}
}
}
</script>
@@ -0,0 +1,12 @@
import Vue from 'vue'
import App from './App.vue'

// 导出一个工厂函数,用于创建新的
// 应用程序、router 和 store 实例
export function createApp () {
const app = new Vue({
// 根实例简单的渲染应用程序组件。
render: h => h(App)
})
return { app }
}
@@ -0,0 +1,8 @@
import { createApp } from './app'

// 客户端特定引导逻辑……

const { app } = createApp()

// 这里假定 App.vue 模板中根元素具有 `id="app"`
app.$mount('#app')
@@ -0,0 +1,6 @@
import { createApp } from './app'

export default context => {
const { app } = createApp()
return app
}

0 comments on commit ba5a0ef

Please sign in to comment.