ssr服务器搭建(windows架设ssr)

zzxiexin 1 0

看了vue 官方的文档,还是有点懵的。百度了一堆东西,终于成功的配置出基于vue-cli3的vue-ssr 服务端预渲染。 有帮助的话,还请点个赞 建议使用nuxt,可以更好的做服务端渲染。

需要自己创建index.template.html文件。这个文件在

文章转载:乐字节

一、创建vue项目

$ vue create vue-ssr 创建目录名为vue-ssr的项目选择项目需要的选项,直接创建即可。

$ cd vue-ssr 创建完成后,进入项目目录。

二、改造vue-ssr

1、安装环境

$ npm install vue-server-renderer lodash.merge webpack-node-externals cross-env express --registry=https://registry.npm.taobao.org --save-dev

2、创建ssr配置文件

在根目录新建 server.js 文件,用于集成node服务

// server.jsconst express = require('express')const fs = require('fs')const { minify } = require('html-minifier')const path = require('path') const { createBundleRenderer } = require('vue-server-renderer')const app = express() const resolve = file => path.resolve(__dirname, file) const renderer = createBundleRenderer(require('./dist/vue-ssr-server-bundle.json'), { runInNewContext: false, template: fs.readFileSync(resolve('./index.template.html'), 'utf-8'), clientManifest: require('./dist/vue-ssr-client-manifest.json'), basedir: resolve('./dist')})app.use(express.static(path.join(__dirname, 'dist')))app.get('*', (req, res) => { res.setHeader('Content-Type', 'text/html') const handleError = err => { if (err.url) { res.redirect(err.url) } else if (err.code === 404) { res.status(404).send('404 | Page Not Found') } else { res.status(500).send('500 | Internal Server Error') console.error(`error during render : ${req.url}`) console.error(err.stack) } } const context = { title: 'document', url: req.url, keywords: '', description: '', } renderer.renderToString(context, (err, html) => { if (err) { return handleError(err) } res.send(minify(html, { collapseWhitespace: true, minifyCSS: true })) })})app.on('error', err => console.log(err))app.listen(8000, () => { console.log(`vue ssr started at http://localhost:8000`)})

在src目录下新建以下两个文件 /src/entry-client.js /src/entry-server.js

1、entry-client.js

// entry-client.jsimport { createApp } from './main'// 客户端特定引导逻辑……const { app } = createApp()// 这里假定 App.vue 模板中根元素具有 `id="app"`app.$mount('#app')

2、entry-server.js

// entry-server.jsimport { createApp } from "./main";export default context => { // 因为有可能会是异步路由钩子函数或组件,所以我们将返回一个 Promise, // 以便服务器能够等待所有的内容在渲染前, // 就已经准备就绪。 return new Promise((resolve, reject) => { const { app, router } = createApp(); // 设置服务器端 router 的位置 router.push(context.url); // 等到 router 将可能的异步组件和钩子函数解析完 router.onReady(() => { const matchedComponents = router.getMatchedComponents(); // 匹配不到的路由,执行 reject 函数,并返回 404 if (!matchedComponents.length) { return reject({ code: 404 }); } // Promise 应该 resolve 应用程序实例,以便它可以渲染 resolve(app); }, reject); });};

在根目录下新建webpack配置文件,vue-cli3+对webpack的配置,已经转移到根目录下的vue.config.js文件内。所以需要在根目录下新建一个 vue.config.js文件。

// vue.config.jsconst VueSSRServerPlugin = require("vue-server-renderer/server-plugin");const VueSSRClientPlugin = require("vue-server-renderer/client-plugin");const nodeExternals = require("webpack-node-externals");const merge = require("lodash.merge");const TARGET_NODE = process.env.WEBPACK_TARGET === "node";const target = TARGET_NODE ? "server" : "client";module.exports = { css: { extract: false }, configureWebpack: () => ({ // 将 entry 指向应用程序的 server / client 文件 entry: `./src/entry-${target}.js`, // 对 bundle renderer 提供 source map 支持 devtool: 'source-map', target: TARGET_NODE ? "node" : "web", node: TARGET_NODE ? undefined : false, output: { libraryTarget: TARGET_NODE ? "commonjs2" : undefined }, // https://webpack.js.org/configuration/externals/#function // https://github.com/liady/webpack-node-externals // 外置化应用程序依赖模块。可以使服务器构建速度更快, // 并生成较小的 bundle 文件。 externals: TARGET_NODE ? nodeExternals({ // 不要外置化 webpack 需要处理的依赖模块。 // 你可以在这里添加更多的文件类型。例如,未处理 *.vue 原始文件, // 你还应该将修改 `global`(例如 polyfill)的依赖模块列入白名单 whitelist: [/\.css$/] }) : undefined, optimization: { splitChunks: false // 这里设置为false,不然会一直build 不成功 }, plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()] }), chainWebpack: config => { config.module .rule("vue") .use("vue-loader") .tap(options => { merge(options, { optimizeSSR: false }); }); }};

修改package.json文件,在scripts属性中添加以下代码:

"build:client": "vue-cli-service build", "build:server": "cross-env WEBPACK_TARGET=node vue-cli-service build --mode server", "build:win": "npm run build:server && move dist\\vue-ssr-server-bundle.json bundle && npm run build:client && move bundle dist\\vue-ssr-server-bundle.json"

修改main.js、router/index.js、store/index.js文件

1、main.js

// main.jsimport Vue from "vue";import App from "./App.vue";import { createRouter } from "./router";import { createStore } from "./store";Vue.config.productionTip = false; export function createApp() { const router = createRouter(); const store = createStore(); const app = new Vue({ router, store, render: h => h(App) }) return { app, router, store }}

2、router/index.js

// router/index.jsimport Vue from "vue";import VueRouter from "vue-router";import Home from "../views/Home.vue";Vue.use(VueRouter);const routes = [ { path: "/", name: "Home", component: Home },];export function createRouter() { return new VueRouter({ mode: "history", base: process.env.BASE_URL, routes });}

3、store/index.js

// store/index.jsimport Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);export function createStore() { return new Vuex.Store({ state: {}, mutations: {}, actions: {}, modules: {} })}

最后一步,运行命令:$ npm run build:win构建完成后运行命令:$ node server然后到浏览器打开 http://localhost:8000 如果出现了页面内容,则证明配置成功!

文章转载:乐字节

标签: #ssr服务器搭建

  • 评论列表

留言评论

 
QQ在线咨询
售前咨询电话
173-175-32776
技术支持电话
173-175-32776
嘿,欢迎咨询