vue2-ssr从vue-cli搭建项目改造服务端渲染+打包上线部署
为了完成vue+ssr，本人呕心沥血翻阅很多博主的文档，并在b站看了很多视频之后，经过个人实践，终于整理出一套完整版，无缺失，不报错的改造流程（亲测！！）从创建=>打包=>上线部署，详细流程。好用的话点个赞吧！！1.通过 vue-cli 创建 vue 项目vue create 项目名称2.进入项目安装vue服务端渲染插件vue-server-renderernpm install vu
·
为了完成vue+ssr，本人呕心沥血翻阅很多博主的文档，并在b站看了很多视频之后，经过个人实践，终于整理出一套完整版，无缺失，不报错的改造流程（亲测！！）
从创建=>打包=>上线部署，详细流程。好用的话点个赞吧！！
1.通过 vue-cli 创建 vue 项目
vue create 项目名称2.进入项目安装vue服务端渲染插件vue-server-renderer
npm install vue-server-renderer -Svue-server-renderer和vue必须匹配版本
vue-server-renderer依赖一些Node.js原生提供的api，因此需要配合Node.js使用
3.更改router/index.js代码
import Vue from "vue"
import Router from "vue-router"
import Home from "@/components/Home"
import About from "@/components/About"
Vue.use(Router)
//每次用户请求都需要创建一个新的router实例
//创建createRouter工厂函数
export default function createRouter() {
//创建router实例
return new Router({
mode: "history",
routes: [
{
path: "/",
name: 'home',
component: Home
},
{
path: "/about",
name: 'about',
component: About
}
]
})
}
4.修改 App.vue
<template>
<div id="app">
<nav>
<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>
</nav>
<router-view></router-view>
</div>
</template>
5.main.js文件
import Vue from "vue"
import App from "./App.vue"
import createRouter from "./router"
//创建createApp工厂函数
export default function createApp() {
const router = createRouter()
//创建vue实例
const app = new Vue({
router,
render: h => h(App),
})
return { app, router }
}
6.在src目录下创建服务端入口entry-server.js用于渲染首屏
import createApp from "./app"
//context就是地址
export default context => {
return new Promise((resolve, reject) => {
const { app, router } = createApp()
//渲染首屏
router.push(context.url)
router.onReady(() => {
resolve(app)
}, reject)
})
}
7.在src目录下创建客户端入口entry-client.js用于挂载激活 app
import createApp from "./app"
const { app, router } = createApp()
router.onReady(() => {
//挂载激活app
app.$mount("#app")
})
8.创建页面模板index.temp.html
在 public 目录下创建 index.temp.html ，作为渲染 Vue 应用程序时，renderer 生成 HTML 页面包裹容器，来包裹生成的 HTML 标记
vue-ssr-outlet那一坨注释，中间不能有空格！！不然会出问题
通过服务端渲染好的文档节点内容，就是放在那里的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue ssr</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
9.创建 Node.js web服务器
这里我使用的是express，它是基于原生node的web服务器做了二次的封装，因为原生的node代码比较多，新手可能不太容易理解
使用以下命令安装express
npm install express --save安装完成后在项目根目录下创建 server.js 文件贴入以下代码，用于搭建web服务器
//nodejs服务器
const express = require("express")
const Vue = require("vue")
const fs = require("fs")
//创建express实例
const app = express()
//创建渲染器
const { createBundleRenderer } = require("vue-server-renderer")
const serverBundle = require("./dist/server/vue-ssr-server-bundle.json")
const clientManifest = require("./dist/client/vue-ssr-client-manifest.json")
const renderer = createBundleRenderer(serverBundle, {
runInNewContext: false,
template: fs.readFileSync("./public/index.temp.html", "utf-8"), //页面模板
clientManifest
})
//中间件处理静态文件请求
app.use(express.static("./dist/client", {index: false}))
//将路由的处理交给vue
app.get("*", async (req, res) => {
try {
const context = {
url: req.url,
title: ""
}
//````````````渲染一个string类型的Vue实例（内容少时）````````````````
// const html = await renderer.renderToString(context)
// res.send(html)
//````````````渲染一个流模式的Vue实例（内容多时）````````````````````
const ssrStream = await renderer.renderToStream(context)
const buffers = []
ssrStream.on("data", (data) => {
buffers.push(data)
})
ssrStream.on("end", () => {
res.end(Buffer.concat(buffers))
})
}catch {
res.status(500).send("服务器内部错误！")
}
})
app.listen(9999, () => {
console.log("服务器渲染成功！")
})
10.修改vue.config.js配置
const VueSSRServerPlugin = require("vue-server-renderer/server-plugin")
const VueSSRClientPlugin = require("vue-server-renderer/client-plugin")
//环境变量，决定入口是客户端还是服务端
const TARGRT_NODE = process.env.WEBPACK_TARGET === "node"
const target = TARGRT_NODE ? "server" : "client"
module.exports = {
css: {
extract: false
},
outputDir: "./dist/" + target,
configureWebpack: () => ({
//将 entry 指向应用程序的 server entry 文件
entry: `./src/entry-${target}.js`,
//对 bundle renderer 提供 source map 支持
devtool: "source-map",
//这允许 webpack 以 Node 适用方式(Node-appropriate fashion)处理动态导入(dynamic import)
//并且还会在编译 Vue 组件时，告知 `vue-loader` 输送面向服务器代码(server-oriented code)
target: TARGRT_NODE ? "node" : "web",
node: TARGRT_NODE ? undefined : false,
output: {
//此处告知 server bundle 使用 Node 风格导出模块(Node-style exports)
libraryTarget: TARGRT_NODE ? "commonjs2" : undefined
},
optimization: { splitChunks: TARGRT_NODE ? false : undefined },
//将服务器的整个输出构建为单个 JOSN 文件的插件
//服务端默认文件名为 vue-ssr-server-bundle.json
plugins: [TARGRT_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()]
})
}
11.配置打包脚本
安装cross-env 插件：运行跨平台设置和使用环境变量的脚本
npm install cross-env --save在 package.json 文件中，scripts选项下，添加以下脚本
"scripts": {
"server": "node server",
"build:client": "vue-cli-service build",
"build:server": "cross-env WEBPACK_TARGET=node vue-cli-service build --mode server",
"build": "npm run build:server && npm run build:client"
},开发完成后
12.打包项目：
npm run build13.打包完成后，在终端执行命令启动web服务器
npm run server在浏览器打开http://localhost:9999即可访问，9999为server.js里面我设置的端口号，可以改成自己想设置的端口
14.发布上线前准备
新建一个文件夹，将以下内容复制到新文件夹下
package.json文件，打包后的dist文件夹，server.js文件
15.部署
在服务器安装node，将新文件夹放入相关公司要求的位置，在项目目录执行npm i安装依赖，然后npm run server启动服务即可
注意！项目上线运行时需保持express服务器持续开启
前往低代码交流专区
更多推荐
19
0- 0
已为社区贡献3条内容
所有评论(0)