npmrun
4 years ago
commit
bad07e32f2
23 changed files with 8419 additions and 0 deletions
@ -0,0 +1,8 @@ |
|||||
|
{ |
||||
|
"presets": [ |
||||
|
["@babel/preset-env", { "modules": false }] |
||||
|
], |
||||
|
"plugins": [ |
||||
|
"syntax-dynamic-import" |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
node_modules |
||||
@ -0,0 +1,95 @@ |
|||||
|
const fs = require("fs"); |
||||
|
const path = require("path"); |
||||
|
const MFS = require("memory-fs"); |
||||
|
const webpack = require("webpack"); |
||||
|
const chokidar = require("chokidar"); |
||||
|
const clientConfig = require("./webpack.client.config"); |
||||
|
const serverConfig = require("./webpack.server.config"); |
||||
|
|
||||
|
/** |
||||
|
* 读取文件 |
||||
|
*/ |
||||
|
const readFile = (fs, file) => { |
||||
|
try { |
||||
|
return fs.readFileSync(path.join(clientConfig.output.path, file), "utf-8"); |
||||
|
} catch (e) {} |
||||
|
}; |
||||
|
|
||||
|
module.exports = function setupDevServer(app, templatePath, cb) { |
||||
|
let bundle; |
||||
|
let template; |
||||
|
let clientManifest; |
||||
|
|
||||
|
let ready; |
||||
|
const readyPromise = new Promise((r) => { |
||||
|
ready = r; |
||||
|
}); |
||||
|
const update = () => { |
||||
|
if (bundle && clientManifest) { |
||||
|
ready(); |
||||
|
cb(bundle, { |
||||
|
template, |
||||
|
clientManifest, |
||||
|
}); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// read template from disk and watch
|
||||
|
template = fs.readFileSync(templatePath, "utf-8"); |
||||
|
chokidar.watch(templatePath).on("change", () => { |
||||
|
template = fs.readFileSync(templatePath, "utf-8"); |
||||
|
console.log("index.html template updated."); |
||||
|
update(); |
||||
|
}); |
||||
|
|
||||
|
// modify client config to work with hot middleware
|
||||
|
clientConfig.entry.app = [ |
||||
|
"webpack-hot-middleware/client", |
||||
|
clientConfig.entry.app, |
||||
|
]; |
||||
|
clientConfig.output.filename = "[name].js"; |
||||
|
clientConfig.plugins.push( |
||||
|
new webpack.HotModuleReplacementPlugin(), |
||||
|
new webpack.NoEmitOnErrorsPlugin() |
||||
|
); |
||||
|
|
||||
|
const clientCompiler = webpack(clientConfig); |
||||
|
const devMiddleware = require("webpack-dev-middleware")(clientCompiler, { |
||||
|
publicPath: clientConfig.output.publicPath, |
||||
|
}); |
||||
|
|
||||
|
// dev middleware
|
||||
|
app.use(devMiddleware); |
||||
|
clientCompiler.hooks.done.tap("done", (stats) => { |
||||
|
console.log("编译完成"); |
||||
|
stats = stats.toJson(); |
||||
|
stats.errors.forEach((err) => console.error(err)); |
||||
|
stats.warnings.forEach((err) => console.warn(err)); |
||||
|
if (stats.errors.length) return; |
||||
|
clientManifest = JSON.parse( |
||||
|
readFile(devMiddleware.context.outputFileSystem, "vue-ssr-client-manifest.json") |
||||
|
); |
||||
|
update(); |
||||
|
}); |
||||
|
|
||||
|
// hot middleware
|
||||
|
app.use( |
||||
|
require("webpack-hot-middleware")(clientCompiler, { heartbeat: 5000 }) |
||||
|
); |
||||
|
|
||||
|
// watch and update server renderer
|
||||
|
const serverCompiler = webpack(serverConfig); |
||||
|
const mfs = new MFS(); |
||||
|
serverCompiler.outputFileSystem = mfs; |
||||
|
serverCompiler.watch({}, (err, stats) => { |
||||
|
if (err) throw err; |
||||
|
stats = stats.toJson(); |
||||
|
if (stats.errors.length) return; |
||||
|
|
||||
|
// read bundle generated by vue-ssr-webpack-plugin
|
||||
|
bundle = JSON.parse(readFile(mfs, "vue-ssr-server-bundle.json")); |
||||
|
update(); |
||||
|
}); |
||||
|
|
||||
|
return readyPromise; |
||||
|
}; |
||||
@ -0,0 +1,80 @@ |
|||||
|
const path = require("path"); |
||||
|
|
||||
|
const { VueLoaderPlugin } = require("vue-loader"); |
||||
|
const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin"); |
||||
|
|
||||
|
module.exports = { |
||||
|
output: { |
||||
|
path: path.resolve(__dirname, "../dist"), |
||||
|
publicPath: "/dist/", |
||||
|
filename: "[name].[chunkhash].js", |
||||
|
}, |
||||
|
resolve: { |
||||
|
alias: { |
||||
|
public: path.resolve(__dirname, "../public"), |
||||
|
}, |
||||
|
}, |
||||
|
devtool: "#cheap-module-source-map", |
||||
|
module: { |
||||
|
noParse: /es6-promise\.js$/, // avoid webpack shimming process
|
||||
|
rules: [ |
||||
|
{ |
||||
|
test: /\.vue$/, |
||||
|
loader: "vue-loader", |
||||
|
options: { |
||||
|
compilerOptions: { |
||||
|
preserveWhitespace: false, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
test: /\.js$/, |
||||
|
loader: "babel-loader", |
||||
|
exclude: /node_modules/, |
||||
|
}, |
||||
|
{ |
||||
|
test: /\.(png|jpg|gif|svg)$/, |
||||
|
loader: "url-loader", |
||||
|
options: { |
||||
|
limit: 10000, |
||||
|
name: "[name].[ext]?[hash]", |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
test: /\.css?$/, |
||||
|
use: [ |
||||
|
'vue-style-loader', |
||||
|
'css-loader' |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
test: /\.less?$/, |
||||
|
use: [ |
||||
|
'vue-style-loader', |
||||
|
'css-loader', |
||||
|
'less-loader' |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
test: /\.scss?$/, |
||||
|
use: [ |
||||
|
'vue-style-loader', |
||||
|
'css-loader', |
||||
|
{ |
||||
|
loader: 'sass-loader', |
||||
|
options: { |
||||
|
// 你也可以从一个文件读取，例如 `variables.scss`
|
||||
|
// 如果 sass-loader 版本 = 8，这里使用 `prependData` 字段
|
||||
|
// 如果 sass-loader 版本 < 8，这里使用 `data` 字段
|
||||
|
additionalData: `$color: red;` |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
plugins: [new VueLoaderPlugin(), new FriendlyErrorsPlugin()], |
||||
|
performance: { |
||||
|
hints: false, |
||||
|
}, |
||||
|
}; |
||||
@ -0,0 +1,29 @@ |
|||||
|
const webpack = require("webpack"); |
||||
|
const { merge } = require('webpack-merge'); |
||||
|
const base = require("./webpack.base.config"); |
||||
|
const VueSSRClientPlugin = require("vue-server-renderer/client-plugin"); |
||||
|
|
||||
|
module.exports = merge(base, { |
||||
|
mode: process.env.NODE_ENV || "development", |
||||
|
entry: { |
||||
|
app: "./src/entry-client.js", |
||||
|
}, |
||||
|
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"', |
||||
|
}), |
||||
|
new VueSSRClientPlugin(), |
||||
|
], |
||||
|
|
||||
|
optimization: { |
||||
|
splitChunks: { |
||||
|
chunks: "all", |
||||
|
minChunks: 1, |
||||
|
name: "manifest" |
||||
|
}, |
||||
|
}, |
||||
|
}); |
||||
@ -0,0 +1,41 @@ |
|||||
|
const webpack = require('webpack') |
||||
|
const { merge } = require('webpack-merge'); |
||||
|
const base = require('./webpack.base.config') |
||||
|
const nodeExternals = require('webpack-node-externals') |
||||
|
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin') |
||||
|
|
||||
|
module.exports = merge(base, { |
||||
|
mode: process.env.NODE_ENV || "development", |
||||
|
// 这允许 webpack 以 Node 适用方式(Node-appropriate fashion)处理动态导入(dynamic import)，
|
||||
|
// 并且还会在编译 Vue 组件时，
|
||||
|
// 告知 `vue-loader` 输送面向服务器代码(server-oriented code)。
|
||||
|
target: 'node', |
||||
|
// 对 bundle renderer 提供 source map 支持
|
||||
|
devtool: 'source-map', |
||||
|
// 将 entry 指向应用程序的 server entry 文件
|
||||
|
entry: './src/entry-server.js', |
||||
|
// 此处告知 server bundle 使用 Node 风格导出模块(Node-style exports)
|
||||
|
output: { |
||||
|
filename: 'server-bundle.js', |
||||
|
libraryTarget: 'commonjs2' |
||||
|
}, |
||||
|
// https://webpack.js.org/configuration/externals/#function
|
||||
|
// https://github.com/liady/webpack-node-externals
|
||||
|
// 外置化应用程序依赖模块。可以使服务器构建速度更快，
|
||||
|
// 并生成较小的 bundle 文件。
|
||||
|
externals: nodeExternals({ |
||||
|
// do not externalize CSS files in case we need to import it from a dep
|
||||
|
allowlist : [/\.css$/, /\?vue&type=style/] |
||||
|
}), |
||||
|
|
||||
|
// 这是将服务器的整个输出
|
||||
|
// 构建为单个 JSON 文件的插件。
|
||||
|
// 默认文件名为 `vue-ssr-server-bundle.json`
|
||||
|
plugins: [ |
||||
|
new webpack.DefinePlugin({ |
||||
|
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'), |
||||
|
'process.env.VUE_ENV': '"server"' |
||||
|
}), |
||||
|
new VueSSRServerPlugin() |
||||
|
] |
||||
|
}) |
||||
@ -0,0 +1,2 @@ |
|||||
|
!function(e){function t(t){for(var r,a,c=t[0],l=t[1],i=t[2],s=0,f=[];s<c.length;s++)a=c[s],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&f.push(o[a][0]),o[a]=0;for(r in l)Object.prototype.hasOwnProperty.call(l,r)&&(e[r]=l[r]);for(p&&p(t);f.length;)f.shift()();return u.push.apply(u,i||[]),n()}function n(){for(var e,t=0;t<u.length;t++){for(var n=u[t],r=!0,c=1;c<n.length;c++){var l=n[c];0!==o[l]&&(r=!1)}r&&(u.splice(t--,1),e=a(a.s=n[0]))}return e}var r={},o={0:0},u=[];function a(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.m=e,a.c=r,a.d=function(e,t,n){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)a.d(n,r,function(t){return e[t]}.bind(null,r));return n},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/dist/";var c=window.webpackJsonp=window.webpackJsonp||[],l=c.push.bind(c);c.push=t,c=c.slice();for(var i=0;i<c.length;i++)t(c[i]);var p=l;u.push([11,1]),n()}([,function(e,t,n){var r=n(7);r.__esModule&&(r=r.default),"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);(0,n(12).default)("895d7142",r,!0,{})},,,,,function(e,t,n){"use strict";n(1)},function(e,t,n){"use strict";n.r(t);var r=n(2),o=n.n(r),u=n(3),a=n.n(u)()(o.a);a.push([e.i,"*[data-v-d2943b3a] {\n color: rebeccapurple;\n}\n","",{version:3,sources:["webpack://./src/App.vue"],names:[],mappings:"AAAA;EACE,oBAAoB;AACtB",sourcesContent:["*[data-v-d2943b3a] {\n color: rebeccapurple;\n}\n"],sourceRoot:""}]),t.default=a},,,,function(e,t,n){"use strict";n.r(t);var r=n(5),o={data:function(){return{}},mounted:function(){console.log("asd")}},u=(n(6),n(4)),a=Object(u.a)(o,(function(){var e=this.$createElement;return(this._self._c||e)("div",{attrs:{id:"app"}},[this._v("\n hello world!!!\n")])}),[],!1,null,"d2943b3a",null).exports;({app:new r.a({render:function(e){return e(a)}})}).app.$mount("#app")}]); |
||||
|
//# sourceMappingURL=app.861ecf6e9a9de782243f.js.map
|
||||
@ -0,0 +1 @@ |
|||||
|
{"version":3,"file":"app.861ecf6e9a9de782243f.js","sources":["webpack:///app.861ecf6e9a9de782243f.js"],"mappings":"AAAA","sourceRoot":""} |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@ |
|||||
|
{"version":3,"file":"manifest.d2d3e546256e88a4c784.js","sources":["webpack:///manifest.d2d3e546256e88a4c784.js"],"mappings":"AAAA;;;;;;AA+PA","sourceRoot":""} |
||||
@ -0,0 +1,68 @@ |
|||||
|
{ |
||||
|
"publicPath": "/dist/", |
||||
|
"all": [ |
||||
|
"app.861ecf6e9a9de782243f.js", |
||||
|
"app.861ecf6e9a9de782243f.js.map", |
||||
|
"manifest.d2d3e546256e88a4c784.js", |
||||
|
"manifest.d2d3e546256e88a4c784.js.map" |
||||
|
], |
||||
|
"initial": [ |
||||
|
"manifest.d2d3e546256e88a4c784.js", |
||||
|
"app.861ecf6e9a9de782243f.js" |
||||
|
], |
||||
|
"async": [], |
||||
|
"modules": { |
||||
|
"336a7835": [ |
||||
|
2, |
||||
|
3 |
||||
|
], |
||||
|
"165589ea": [ |
||||
|
0, |
||||
|
1 |
||||
|
], |
||||
|
"98dff2f8": [ |
||||
|
2, |
||||
|
3 |
||||
|
], |
||||
|
"08194f7f": [ |
||||
|
2, |
||||
|
3 |
||||
|
], |
||||
|
"b1fe4c2a": [ |
||||
|
2, |
||||
|
3 |
||||
|
], |
||||
|
"9dec38a2": [ |
||||
|
2, |
||||
|
3 |
||||
|
], |
||||
|
"1ab9b00f": [ |
||||
|
0, |
||||
|
1 |
||||
|
], |
||||
|
"388fc7b2": [ |
||||
|
0, |
||||
|
1 |
||||
|
], |
||||
|
"4dc8caee": [ |
||||
|
2, |
||||
|
3 |
||||
|
], |
||||
|
"4544517c": [ |
||||
|
2, |
||||
|
3 |
||||
|
], |
||||
|
"fe4c40fa": [ |
||||
|
2, |
||||
|
3 |
||||
|
], |
||||
|
"5163fcfe": [ |
||||
|
0, |
||||
|
1 |
||||
|
], |
||||
|
"3ae59d9f": [ |
||||
|
2, |
||||
|
3 |
||||
|
] |
||||
|
} |
||||
|
} |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,37 @@ |
|||||
|
{ |
||||
|
"name": "Vue Hackernews 2.0", |
||||
|
"short_name": "Vue HN", |
||||
|
"icons": [{ |
||||
|
"src": "/public/logo-120.png", |
||||
|
"sizes": "120x120", |
||||
|
"type": "image/png" |
||||
|
}, { |
||||
|
"src": "/public/logo-144.png", |
||||
|
"sizes": "144x144", |
||||
|
"type": "image/png" |
||||
|
}, { |
||||
|
"src": "/public/logo-152.png", |
||||
|
"sizes": "152x152", |
||||
|
"type": "image/png" |
||||
|
}, { |
||||
|
"src": "/public/logo-192.png", |
||||
|
"sizes": "192x192", |
||||
|
"type": "image/png" |
||||
|
}, { |
||||
|
"src": "/public/logo-256.png", |
||||
|
"sizes": "256x256", |
||||
|
"type": "image/png" |
||||
|
}, { |
||||
|
"src": "/public/logo-384.png", |
||||
|
"sizes": "384x384", |
||||
|
"type": "image/png" |
||||
|
}, { |
||||
|
"src": "/public/logo-512.png", |
||||
|
"sizes": "512x512", |
||||
|
"type": "image/png" |
||||
|
}], |
||||
|
"start_url": "/", |
||||
|
"background_color": "#f2f3f5", |
||||
|
"display": "standalone", |
||||
|
"theme_color": "#f60" |
||||
|
} |
||||
File diff suppressed because it is too large
@ -0,0 +1,51 @@ |
|||||
|
{ |
||||
|
"name": "ssr-demo", |
||||
|
"version": "1.0.0", |
||||
|
"description": "", |
||||
|
"main": "index.js", |
||||
|
"scripts": { |
||||
|
"start": "node server.js", |
||||
|
"build": "rimraf dist && npm run build:client && npm run build:server", |
||||
|
"build:client": "cross-env NODE_ENV=production webpack --config build/webpack.client.config.js --progress", |
||||
|
"build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.config.js --progress", |
||||
|
// npm install 之后会自动运行 |
||||
|
"postinstall": "npm run build" |
||||
|
}, |
||||
|
"keywords": [], |
||||
|
"author": "", |
||||
|
"license": "ISC", |
||||
|
"dependencies": { |
||||
|
"express": "^4.17.1", |
||||
|
"less-loader": "^5.0.0", |
||||
|
"vue": "^2.6.13" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@babel/core": "^7.14.3", |
||||
|
"@babel/preset-env": "^7.14.4", |
||||
|
"babel-loader": "^8.2.2", |
||||
|
"babel-plugin-syntax-dynamic-import": "^6.18.0", |
||||
|
"chokidar": "^3.5.1", |
||||
|
"compression": "^1.7.4", |
||||
|
"cross-env": "^7.0.3", |
||||
|
"css-loader": "^5.2.6", |
||||
|
"friendly-errors-webpack-plugin": "^1.7.0", |
||||
|
"less": "^4.1.1", |
||||
|
"lru-cache": "^6.0.0", |
||||
|
"memory-fs": "^0.5.0", |
||||
|
"node-sass": "^6.0.0", |
||||
|
"rimraf": "^3.0.2", |
||||
|
"route-cache": "^0.4.5", |
||||
|
"sass-loader": "^12.0.0", |
||||
|
"url-loader": "^4.1.1", |
||||
|
"vue-loader": "^15.9.7", |
||||
|
"vue-server-renderer": "^2.6.13", |
||||
|
"vue-style-loader": "^4.1.3", |
||||
|
"vue-template-compiler": "^2.6.13", |
||||
|
"webpack": "^4.46.0", |
||||
|
"webpack-cli": "^4.7.0", |
||||
|
"webpack-dev-middleware": "^5.0.0", |
||||
|
"webpack-hot-middleware": "^2.25.0", |
||||
|
"webpack-merge": "^5.7.3", |
||||
|
"webpack-node-externals": "^3.0.0" |
||||
|
} |
||||
|
} |
||||
|
After Width: | Height: | Size: 3.0 KiB |
@ -0,0 +1 @@ |
|||||
|
## [文档](https://ssr.vuejs.org/zh/#%E4%BB%80%E4%B9%88%E6%98%AF%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E6%B8%B2%E6%9F%93-ssr-%EF%BC%9F) |
||||
@ -0,0 +1,103 @@ |
|||||
|
// server.js
|
||||
|
const express = require('express') |
||||
|
const path = require('path') |
||||
|
const LRU = require('lru-cache') |
||||
|
const microcache = require('route-cache') |
||||
|
const compression = require('compression') |
||||
|
const resolve = file => path.resolve(__dirname, file) |
||||
|
const { createBundleRenderer } = require('vue-server-renderer') |
||||
|
|
||||
|
const useMicroCache = process.env.MICRO_CACHE !== 'false' |
||||
|
|
||||
|
const serverInfo = |
||||
|
`express/${require('express/package.json').version} ` + |
||||
|
`vue-server-renderer/${require('vue-server-renderer/package.json').version}` |
||||
|
|
||||
|
const app = express() |
||||
|
|
||||
|
function createRenderer (bundle, options) { |
||||
|
// https://github.com/vuejs/vue/blob/dev/packages/vue-server-renderer/README.md#why-use-bundlerenderer
|
||||
|
return createBundleRenderer(bundle, Object.assign(options, { |
||||
|
// for component caching
|
||||
|
// cache: LRU({
|
||||
|
// max: 1000,
|
||||
|
// maxAge: 1000 * 60 * 15
|
||||
|
// }),
|
||||
|
// this is only needed when vue-server-renderer is npm-linked
|
||||
|
basedir: resolve('./dist'), |
||||
|
// recommended for performance
|
||||
|
runInNewContext: false |
||||
|
})) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
let renderer |
||||
|
let readyPromise |
||||
|
const templatePath = resolve('./src/index.template.html') |
||||
|
|
||||
|
readyPromise = require('./build/setup-dev-server')( |
||||
|
app, |
||||
|
templatePath, |
||||
|
(bundle, options) => { |
||||
|
renderer = createRenderer(bundle, options) |
||||
|
} |
||||
|
) |
||||
|
|
||||
|
const serve = (path, cache) => express.static(resolve(path), { |
||||
|
maxAge: cache ? 1000 * 60 * 60 * 24 * 30 : 0 |
||||
|
}) |
||||
|
|
||||
|
app.use(compression({ threshold: 0 })) |
||||
|
app.use('/dist', serve('./dist', true)) |
||||
|
app.use('/public', serve('./public', true)) |
||||
|
app.use('/manifest.json', serve('./manifest.json', true)) |
||||
|
app.use('/service-worker.js', serve('./dist/service-worker.js')) |
||||
|
app.use(microcache.cacheSeconds(1, req => useMicroCache && req.originalUrl)) |
||||
|
|
||||
|
function render (req, res) { |
||||
|
const s = Date.now() |
||||
|
|
||||
|
res.setHeader("Content-Type", "text/html") |
||||
|
res.setHeader("Server", serverInfo) |
||||
|
|
||||
|
const handleError = err => { |
||||
|
if (err.url) { |
||||
|
res.redirect(err.url) |
||||
|
} else if(err.code === 404) { |
||||
|
res.status(404).send('404 | Page Not Found') |
||||
|
} else { |
||||
|
// Render Error Page or Redirect
|
||||
|
res.status(500).send('500 | Internal Server Error') |
||||
|
console.error(`error during render : ${req.url}`) |
||||
|
console.error(err.stack) |
||||
|
} |
||||
|
} |
||||
|
const context = { |
||||
|
title: 'hsello', |
||||
|
meta: ` |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<meta name="keyword" content="vue,ssr"> |
||||
|
<meta name="description" content="vue srr demo"> |
||||
|
`,
|
||||
|
url: req.url |
||||
|
} |
||||
|
console.log(renderer); |
||||
|
renderer.renderToString(context, (err, html) => { |
||||
|
if (err) { |
||||
|
return handleError(err) |
||||
|
} |
||||
|
res.send(html) |
||||
|
console.log(`whole request: ${Date.now() - s}ms`) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
app.get('*', (req, res) => { |
||||
|
readyPromise.then(() => render(req, res)) |
||||
|
}) |
||||
|
|
||||
|
const port = process.env.PORT || 8080 |
||||
|
app.listen(port, () => { |
||||
|
console.log(`server started at localhost:${port}`) |
||||
|
}) |
||||
@ -0,0 +1,23 @@ |
|||||
|
<template> |
||||
|
<div id="app"> |
||||
|
hello world!!! |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
mounted(){ |
||||
|
console.log('asd'); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped lang="less"> |
||||
|
*{ |
||||
|
color: red; |
||||
|
} |
||||
|
</style> |
||||
@ -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,0 +1,16 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<title>{{ title }}</title> |
||||
|
{{{ meta }}} |
||||
|
<link rel="manifest" href="/manifest.json"> |
||||
|
<style> |
||||
|
#skip a { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; } |
||||
|
#skip a:focus { position:static; width:auto; height:auto; } |
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div id="skip"><a href="#app">skip to content</a></div> |
||||
|
<!--vue-ssr-outlet--> |
||||
|
</body> |
||||
|
</html> |
||||
Loading…
Reference in new issue