本文主要是介绍vue-ssr 服务端渲染，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
server 配置
const Koa = require('koa');
const Router = require('koa-router');
const serve = require('koa-static');
const path = require('path');
const fs = require('fs');
const backendApp = new Koa();
const frontendApp = new Koa();
const backendRouter = new Router();
const frontendRouter = new Router();const bundle = fs.readFileSync(path.resolve(__dirname, '../dist/server.bundle.js'), 'utf-8');
const renderer = require('vue-server-renderer').createBundleRenderer(bundle, {template: fs.readFileSync(path.resolve(__dirname, '../dist/index.ssr.html'), 'utf-8')
});// 后端Server
backendRouter.get('/index', (ctx, next) => {// 这里用 renderToString 的 promise 返回的 html 有问题，没有样式renderer.renderToString((err, html) => {if (err) {console.error(err);ctx.status = 500;ctx.body = '服务器内部错误';} else {console.log(html);ctx.status = 200;ctx.body = html;}});
});backendApp.use(serve(path.resolve(__dirname, '../dist')));backendApp.use(backendRouter.routes()).use(backendRouter.allowedMethods());backendApp.listen(3000, () => {console.log('服务器端渲染地址： http://localhost:3000');
});// 前端Server
frontendRouter.get('/index', (ctx, next) => {let html = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8');ctx.type = 'html';ctx.status = 200;ctx.body = html;
});frontendApp.use(serve(path.resolve(__dirname, '../dist')));frontendApp.use(frontendRouter.routes()).use(frontendRouter.allowedMethods());frontendApp.listen(3001, () => {console.log('浏览器端渲染地址： http://localhost:3001');
});webpack 配置
config/webpack.base.config.js
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');module.exports = {mode: 'development',resolve: {extensions: ['.js', '.vue']},output: {path: path.resolve(__dirname, '../dist'),filename: '[name].bundle.js'},module: {rules: [{test: /\.vue$/,use: 'vue-loader'},{test: /\.js$/,use: 'babel-loader'},{test: /\.css$/,use: ['vue-style-loader', 'css-loader', 'postcss-loader']},{test: /\.(jpg|jpeg|png|gif|svg)$/,use: {loader: 'url-loader',options: {limit: 10000 // 10Kb}}}]},plugins: [new VueLoaderPlugin()]
};config/webpack.client.config.js
const path = require('path');
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const base = require('./webpack.base.config');module.exports = merge(base, {entry: {client: path.resolve(__dirname, '../src/entry-client.js')},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, '../src/index.html'),filename: 'index.html'})]
});config/webpack.server.config.js
const path = require('path');
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const base = require('./webpack.base.config');module.exports = merge(base, {target: 'node',entry: {server: path.resolve(__dirname, '../src/entry-server.js')},output: {libraryTarget: 'commonjs2'},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, '../src/index.ssr.html'),filename: 'index.ssr.html',files: {js: 'client.bundle.js'},excludeChunks: ['server']})]
});源码下载
这篇关于vue-ssr 服务端渲染的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
