|
为了简化这些，你可以直接在建设renderer时提供一个页面模板。大都时辰，我们会将页面模板放在特有的文件中：
- <!DOCTYPE html>
- <html lang="en">
- <head><title>Hello</title></head>
- <body>
- <!--vue-ssr-outlet-->
- </body>
- </html>
然后，我们可以读取和传输文件到Vue renderer中：
- const tpl = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf-8');
- const renderer = vssr.createRenderer({
- template: tpl,
- });
Webpack设置
然而在现实项目中，不止上述例子那么简朴，必要思量许多方面：路由、数据预取、组件化、全局状态等，以是处事端渲染不是只用一个简朴的模板，然后加上行使vue-server-renderer完成的，如下面的表示图所示：
如表示图所示，一样平常的Vue处事端渲染项目，有两个项目进口文件，别离为entry-client.js和entry-server.js，一个仅运行在客户端，一个仅运行在处事端，颠末Webpack打包后，会天生两个Bundle，处事端的Bundle会用于在处事端行使假造DOM天生应用措施的“快照”，客户端的Bundle会在赏识器执行。
因此，我们必要两个Webpack设置，别离定名为webpack.client.config.js和webpack.server.config.js，别离用于天生客户端Bundle与处事端Bundle，别离定名为vue-ssr-client-manifest.json与vue-ssr-server-bundle.json，关于怎样设置，Vue官方有相干示例vue-hackernews-2.0
开拓情形搭建
我地址的项目行使Koa作为Web Server Frame，项目行使koa-webpack举办开拓情形的构建。假如是在产物情形下，会天生vue-ssr-client-manifest.json与vue-ssr-server-bundle.json，包括对应的Bundle，提供客户端和处事端引用，而在开拓情形下，一样平常环境下放在内存中。行使memory-fs模块举办读取。
- const fs = require('fs')
- const path = require( 'path' );
- const webpack = require( 'webpack' );
- const koaWpDevMiddleware = require( 'koa-webpack' );
- const MFS = require('memory-fs');
- const appSSR = require('./../../app.ssr.js');
- let wpConfig;
- let clientConfig, serverConfig;
- let wpCompiler;
- let clientCompiler, serverCompiler;
- let clientManifest;
- let bundle;
- // 天生处事端bundle的webpack设置
- if ((fs.existsSync(path.resolve(cwd,'webpack.server.config.js')))) {
- serverConfig = require(path.resolve(cwd, 'webpack.server.config.js'));
- serverCompiler = webpack( serverConfig );
- }
- // 天生客户端clientManifest的webpack设置
- if ((fs.existsSync(path.resolve(cwd,'webpack.client.config.js')))) {
- clientConfig = require(path.resolve(cwd, 'webpack.client.config.js'));
- clientCompiler = webpack(clientConfig);
- }
- if (serverCompiler && clientCompiler) {
- let publicPath = clientCompiler.output && clientCompiler.output.publicPath;
- const koaDevMiddleware = await koaWpDevMiddleware({
- compiler: clientCompiler,
- devMiddleware: {
- publicPath,
- serverSideRender: true
- },
- });
- app.use(koaDevMiddleware);
- // 处事端渲染天生clientManifest
- app.use(async (ctx, next) => {
- const stats = ctx.state.webpackStats.toJson();
- const assetsByChunkName = stats.assetsByChunkName;
- stats.errors.forEach(err => console.error(err));
- stats.warnings.forEach(err => console.warn(err));
- if (stats.errors.length) {
- console.error(stats.errors);
- return;
- }
- // 天生的clientManifest放到appSSR模块，应用措施可以直接读取
- let fileSystem = koaDevMiddleware.devMiddleware.fileSystem;
- clientManifest = JSON.parse(fileSystem.readFileSync(path.resolve(cwd,'./dist/vue-ssr-client-manifest.json'), 'utf-8'));
- appSSR.clientManifest = clientManifest;
- await next();
- });
- // 处事端渲染的server bundle 存储到内存里
- const mfs = new MFS();
- serverCompiler.outputFileSystem = mfs;
- serverCompiler.watch({}, (err, stats) => {
- if (err) {
- throw err;
- }
- statsstats = stats.toJson();
- if (stats.errors.length) {
- console.error(stats.errors);
- return;
- }
- // 天生的bundle放到appSSR模块，应用措施可以直接读取
- bundle = JSON.parse(mfs.readFileSync(path.resolve(cwd,'./dist/vue-ssr-server-bundle.json'), 'utf-8'));
- appSSR.bundle = bundle;
- });
- }
渲染中间件设置 （编辑：湖南网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
