从0到1构建vueSSR项目之node以及vue-cli3的配置
作者：绅士 发布时间：2024-04-27 16:06:59
标签：vueSSR,vue-cli3,配置
前言
上一次做了路由的相关配置，原本计划今天要做vuex部分，但是想了想，发现vuex单独的客户端部分穿插解释起来很麻烦，所以今天改做服务端部分。
服务端部分做完，再去做vuex的部分，这样就会很清晰。
vue ssr是分两个端，一个是客户端，一个是服务端。
所以要做两个cli3的配置。
那么下面就直接开始做吧。
修改package.json的命令
//package.json :client代表客户端 :server代表服务端
//使用VUE_NODE来作为运行环境是node的标识
//cli3内置 命令 --no-clean 不会清除dist文件
"scripts": {
"serve:client": " vue-cli-service serve",
"build":"npm run build:server -- --silent && npm run build:client -- --no-clean --silent",
"build:client": "vue-cli-service build",
"build:server": "cross-env VUE_NODE=node vue-cli-service build",
"start:server": "cross-env NODE_ENV=production nodemon nodeScript/index"
}
修改vue.config.js配置
添加完相关脚本命令之后，我们开始改造cli3配置。
首先要require('vue-server-renderer')
然后再根据VUE_NODE环境变量来决定编译的走向以及生成不同的环境清单
先做cli3服务端的入口文件
// src/entry/server.js
import {
createApp
} from '../main.js'
export default context => {
return new Promise((resolve, reject) => {
const {
app,
router
} = createApp(context.data)
//根据node传过来的路由 来调用router路由的指向
router.push(context.url)
router.onReady(() => {
//获取当前路由匹配的组件数组。
const matchedComponents = router.getMatchedComponents()
//长度为0就是没找到该路由所匹配的组件
//可以路由设置重定向或者传回node node来操作也可以
if (!matchedComponents.length) {
return reject({
code: 404
})
}
resolve(app)
}, reject)
})
}
这里是cli3的配置
//vue.config.js
const ServerPlugin = require('vue-server-renderer/server-plugin'),//生成服务端清单
ClientPlugin = require('vue-server-renderer/client-plugin'),//生成客户端清单
nodeExternals = require('webpack-node-externals'),//忽略node_modules文件夹中的所有模块
VUE_NODE = process.env.VUE_NODE === 'node',
entry = VUE_NODE ? 'server' : 'client';//根据环境变量来指向入口
module.exports = {
css: {
extract: false//关闭提取css,不关闭 node渲染会报错
},
configureWebpack: () => ({
entry: `./src/entry/${entry}`,
output: {
filename: 'js/[name].js',
chunkFilename: 'js/[name].js',
libraryTarget: VUE_NODE ? 'commonjs2' : undefined
},
target: VUE_NODE ? 'node' : 'web',
externals: VUE_NODE ? nodeExternals({
//设置白名单
whitelist: /\.css$/
}) : undefined,
plugins: [//根据环境来生成不同的清单。
VUE_NODE ? new ServerPlugin() : new ClientPlugin()
]
}),
chainWebpack: config => {
config.resolve
.alias
.set('vue$', 'vue/dist/vue.esm.js')
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.optimizeSSR = false;
return options;
});
config.module
.rule('images')
.use('url-loader')
.tap(options => {
options = {
limit: 1024,
fallback:'file-loader?name=img/[path][name].[ext]'
}
return options;
});
}
}
node相关配置
用于node渲染 必然要拦截get请求的。然后根据get请求地址来进行要渲染的页面。
官方提供了vue-server-renderer插件
大概的方式就是 node拦截所有的get请求，然后将获取到的路由地址，传给前台，然后使用router实例进行push
再往下面看之前 先看一下官方文档
创建BundleRenderer
createBundleRenderer
将 Vue 实例渲染为字符串。
renderToString
渲染应用程序的模板
template
生成所需要的客户端或服务端清单
clientManifest
先创建 服务端所需要的模板
//public/index.nodeTempalte.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico" rel="external nofollow" >
<meta charset="utf-8">
<title>vuessr</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
node部分
先创建三个文件
index.js //入口
proxy.js //代理
server.js //主要配置
//server.js
const fs = require('fs');
const { resolve } = require('path');
const express = require('express');
const app = express();
const proxy = require('./proxy');
const { createBundleRenderer } = require('vue-server-renderer')
//模板地址
const templatePath = resolve(__dirname, '../public/index.nodeTempalte.html')
//客户端渲染清单
const clientManifest = require('../dist/vue-ssr-client-manifest.json')
//服务端渲染清单
const bundle = require('../dist/vue-ssr-server-bundle.json')
//读取模板
const template = fs.readFileSync(templatePath, 'utf-8')
const renderer = createBundleRenderer(bundle,{
template,
clientManifest,
runInNewContext: false
})
//代理相关
proxy(app);
//请求静态资源相关配置
app.use('/js', express.static(resolve(__dirname, '../dist/js')))
app.use('/css', express.static(resolve(__dirname, '../dist/css')))
app.use('/font', express.static(resolve(__dirname, '../dist/font')))
app.use('/img', express.static(resolve(__dirname, '../dist/img')))
app.use('*.ico', express.static(resolve(__dirname, '../dist')))
//路由请求
app.get('*', (req, res) => {
res.setHeader("Content-Type", "text/html")
//传入路由 src/entry/server.js会接收到 使用vueRouter实例进行push
const context = {
url: req.url
}
renderer.renderToString(context, (err, html) => {
if (err) {
if (err.url) {
res.redirect(err.url)
} else {
res.status(500).end('500 | 服务器错误');
console.error(`${req.url}: 渲染错误 `);
console.error(err.stack)
}
}
res.status(context.HTTPStatus || 200)
res.send(html)
})
})
module.exports = app;
//proxy.js
const proxy = require('http-proxy-middleware');
function proxyConfig(obj){
return {
target:'localhost:8081',
changeOrigin:true,
...obj
}
}
module.exports = (app) => {
//代理开发环境
if (process.env.NODE_ENV !== 'production') {
app.use('/js/main*', proxy(proxyConfig()));
app.use('/*hot-update*',proxy(proxyConfig()));
app.use('/sockjs-node',proxy(proxyConfig({ws:true})));
}
}
//index.js
const app = require('./server')
app.listen(8080, () => {
console.log('\033[42;37m DONE \033[40;33m localhost:8080 服务已启动\033[0m')
})
做完这一步之后，就可以预览基本的服务渲染了。
后面就只差开发环境的配置，以及到node数据的传递(vuex)
npm run build
npm run start:server
打开localhost:8080
F12 - Network - Doc 就可以看到内容
最终目录结构
|-- vuessr
|-- .gitignore
|-- babel.config.js
|-- package-lock.json
|-- package.json
|-- README.md
|-- vue.config.js
|-- nodeScript //node 渲染配置
| |-- index.js
| |-- proxy.js
| |-- server.js
|-- public//模板文件
| |-- favicon.ico
| |-- index.html
| |-- index.nodeTempalte.html
|-- src
|-- App.vue
|-- main.js
|-- router.config.js//路由集合
|-- store.config.js//vuex 集合
|-- assets//全局静态资源源码
| |-- 备注.txt
| |-- img
| |-- logo.png
|-- components//全局组件
| |-- Head
| |-- index.js
| |-- index.scss
| |-- index.vue
| |-- img
| |-- logo.png
|-- entry//cli3入口
| |-- client.js
| |-- server.js
| |-- 备注.txt
|-- methods//公共方法
| |-- 备注.txt
| |-- mixin
| |-- index.js
|-- pages//源码目录
| |-- home
| | |-- index.js
| | |-- index.scss
| | |-- index.vue
| | |-- img
| | | |-- flow.png
| | | |-- head_portrait.jpg
| | | |-- logo.png
| | | |-- vuessr.png
| | |-- vue
| | | |-- index.js
| | | |-- index.scss
| | | |-- index.vue
| | |-- vueCli3
| | | |-- index.js
| | | |-- index.scss
| | | |-- index.vue
| | |-- vueSSR
| | | |-- index.js
| | | |-- index.scss
| | | |-- index.vue
| | |-- vuex
| | |-- index.js
| | |-- index.scss
| | |-- index.vue
| |-- router//路由配置
| | |-- index.js
| |-- store//vuex配置
| |-- all.js
| |-- gather.js
| |-- index.js
|-- static//cdn资源
|-- 备注.txt
来源：https://segmentfault.com/a/1190000018043697
0
投稿猜你喜欢
Rect（rectangle）指的是矩形，或者长方形，在 Pygame 中我们使用 Rect() 方法来创建一个指定位置，大小的矩形区域。函- 这几天研究HUE，这个东西是基于Django开发的，于是又看了一眼Django，学着写个demo。微软开源的vscode在业界反应不错，以前
- <?php $foo = 'Bob'; // 将 'Bob' 赋给 $foo $bar = &
- 本文实例为大家分享了python实现飞机大战的具体代码，供大家参考，具体内容如下初学Python，写了一个简单的Python小游戏。师出bi
- 之前一直遇到js插件生成的元素，click事件无效的问题，重新绑定也不行，终于找到解决方法，在此记下来。同时加深对js事件处理机制的理解。1
- 函数名：chk_Email()'返回值：布尔值（True为通过，False为未通过）'参数：email(需要判断的email
- 思路改进原博主文章(Python GUI–Tkinter简单实现个性签名设计)的代码,原先的代码是基于Python2的,我这份代码基于Pyt
- Python json 错误xx is not JSON serializable解决办法在使用json的时候经常会遇到xxx
- 说明字符串驻留是一种仅保存一份相同且不可变字符串的方法。不同的值被存放在字符串驻留池中，发生驻留之后, 许多变量可能指向内存中的相同字符串对
- 目录Jupyter：大数据可视化的一站式商店 Tableau：AI，大数据和机器学习应用可视化的最佳解决方案Googl
- 我就废话不多说了，直接 上代码吧！import kafka.api.PartitionOffsetRequestInfo;import ka
- #!/usr/bin/python # Filename: gen_salt.py impo
- 研究了一晚上的成果。import serialimport win32com.clientimport matplotlib.pyplot
- 说检查点,其实就是对过去历史的记录，可以认为是log.不过这里进行了简化.举例来说,我现在又一段文本.文本里放有一堆堆的链接地址.我现在的任
- 开发工具python版本：3.6.4相关模块：pygame；以及一些python自带的模块。环境搭建安装python并添加到环境变量，pip
- BULK COLLECT(成批聚合类型)和数组集合type类型is table of 表％rowtype index by binary_i
- 一条语句搞定数据库分页select top 10 b.* from (select&nbs
- 大家好，我是了不起！在某些难以抉择得时候，我们经常要用外力来帮助我们做出选择比如，梁山出征方腊前沙场点兵，挑选先锋的场景这个时候
- 如下所示：# coding:utf-8import shapefilew = shapefile.Writer()w.autoBalance
- 我们之前写的代码都没有对前端input框输入的数据做验证，我们今天来看下，如果做form表单的数据的验证在views文件做验证首先用文字描述
