从0到一构建vueSSR项目之结节以及vue-cli3的配置

前言

上一次做了路由的相关配置，原本计划今天要做状态管理部分，但是想了想，发现状态管理单独的客户端部分穿插解释起来很麻烦，所以今天改做服务端部分。

服务端部分做完，再去做状态管理的部分，这样就会很清晰。

vue ssr是分两个端，一个是客户端，一个是服务端。

所以要做两个cli3的配置。

那么下面就直接开始做吧。

修改package.json的命令

//package.json :client代表客户端：server代表服务端//使用VUE节点来作为运行环境是结节的标识//cli3内置命令-不干净不会清除距离文件脚本： { ' serve : client ' : ' vue-CLI-service serve '，' build ' : ' NPM运行构建： server-silent NPM运行构建： client-no-clean-silent '，' build : client ' : ' vue-CLI-service build '，' build : server ' 3: ' cross-ENV VUE _ NODE=NODE vue-CLI-service build '，' start 3:s修改vue.config.js配置

添加完相关脚本命令之后，我们开始改造cli3配置。

首先要需要(' vue-服务器-渲染器)

然后再根据VUE节点环境变量来决定编译的走向以及生成不同的环境清单

先做cli3服务端的入口文件

//src/entry/server。' jsimport { createApp } from './main。js ' export默认上下文={返回新的Promise((解析，拒绝)={ const { app，路由器}=createApp(context.data) //根据结节传过来的路由来调用路由器路由的指向路由器。push(上下文。URL)路由器。onready(()={//获取当前路由匹配的组件数组常量匹配组件=路由器。getmatched components()//长度为0就是没找到该路由所匹配的组件//可以路由设置重定向或者传回节点节点来操作也可以if(！匹配的组件。长度){退货拒绝({代码： 404 })}解决(app)}，拒绝)})这里是cli3的配置

//vue。配置。jsconst server plugin=require(' vue-server-renderer/server-plugin ')，//生成服务端清单客户端插件=必需(' vue-服务器-渲染器/客户端-插件')，//生成客户端清单nodexternals=require(' web pack-node-externals ')，//忽略节点_模块文件夹中的所有模块VUE节点=进程。环境。vue _ NODE==' NODE '，条目=VUE_NODE？服务器":"客户端；//根据环境变量来指向入口模块。导出={ CSS : { extract : false//关闭提取css，不关闭结节渲染会报错}，configurewebpack k :()=({ entry : `./src/entry/${entry} `，输出： { filename : ' js/[name].js '，chunkFilename: 'js/[name].js '，库目标： VUE _ NODE？commonjs2' : undefined }，target: VUE_NODE？node' : 'web '，externals: VUE_NODE？nodexternals({//设置白名单白名单： /\。css$/}) :未定义，plugins: [//根据环境来生成不同的清单VUE节点？new ServerPlugin()(: new client plugin()]})，chainweb pack k : config={ config。决心.别名set('vue$ '，' vue/dist/vue。无害环境管理。js)配置。模块.规则(' vue ').使用(“vue-loader”).点击(选项={ options。optimizessr=false返回选项；});配置模块。规则('图像')。使用(“url加载程序”).点击（选项={ options={ limit: 1024，fallback: '文件加载器？name=img/[路径][名称]。[ext]' }返回选项；});} }节点相关配置

用于结节渲染必然要拦截得到请求的。然后根据得到请求地址来进行要渲染的页面。

官方提供了服务器渲染器插件

大概的方式就是结节拦截所有的得到请求，然后将获取到的路由地址，传给前台，然后使用路由器实例进行推

再往下面看之前先看一下官方文档

创建bundlerendererecreatebundlerenderer

将某视频剪辑软件实例渲染为字符串渲染字符串

渲染应用程序的模板模板

生成所需要的客户端或服务端清单clientManifest

先创建服务端所需要的模板

//公共/索引。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='/fav icon。ico ' rel=' external no follow ' meta charset=' utf-8 ' title vu essr/title/head body！-vue-SSR-插座-/车身/htmlnode部分

先创建三个文件index.js //入口proxy.js //代理server.js //主要配置

//服务器。jsconst 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-客户端-清单。JSON')//服务端渲染清单const bundle=require('./dist/vue-SSR-服务器-捆绑包。JSON ')//读取模板const模板=fs。readfilesync(模板路径，' utf-8 ')常量渲染器=createBundleRenderer(bundle，{ template，clientManifest，runinnewcontexts : false })//代理相关代理(app)；//请求静态资源相关配置app.use('/js '，express。静态(解析(_ _ dirname’)./dist/js ')应用程序。使用('/CSS '，express。静态(解析(_ _ dirname’)./dist/CSS ')应用程序。使用('/font '，express。静态(解析(_ _ dirname’)./dist/font ')应用程序。使用('/img '，express。静态(解析(_ dirname’)./dist/img ')应用程序。使用(' * .ico ' express。静态(解析(_ _ dirname’)./dist')))//路由请求app.get('* '，(req，RES)={ RES . set header(' Content-Type '，' text/html') //传入路由src/entry/server.js会接收到使用vueRouter实例进行推送常量上下文={ URL :请求。URL }呈现。rendertostring(context)，(err，html)={ if(err){ if(err。网址)重定向。否则{ RES . status(500).end('500 |服务器错误');console.error(`${req.url}:渲染错误`);控制台。错误(错误。堆栈)} } RES .状态(上下文. HTTPStatus | | 200)RES . send(html)})})模块。exports=app//代理。jsconst proxy=require(' http-proxy-中间件');函数proxyConfig(obj){ return { target : ' localhost :8081 '，将：中的原点更改为true，obj }}module.exports=(app)={ //代理开发环境if (process.env.NODE_ENV！==' production '){ app。使用('/js/main * '，proxy config())；app.use('/*hot-update* '，proxy config())；app.use('/sockjs-node '，proxy config({ ws : true })；}}//index.jsconst app=require(' ./server')app.listen(8080，()={ console。log ' \ 033[42；37m DONE \ 033[40；33m localhost:8080服务已启动\ 033[0m’)})做完这一步之后，就可以预览基本的服务渲染了。

后面就只差开发环境的配置，以及到结节数据的传递(vuex)

新公共管理运行buildnpm运行start:server打开本地主机：8080F12 -网络-文档就可以看到内容

最终目录结构

-vu essor |-.gitignore |-babel。配置。js |-包锁。JSON |-包。JSON |-自述文件。MD |-视图。配置。js |-nodescript//node郑晓雨同学<索引。js |-代理。js |-服务器。js |-public//阿金阿金阿金阿金阿金阿金阿金阿金阿金阿金阿金阿金阿金阿金阿金阿金阿金阿金阿金阿金阿金你好. txt |-img |-徽标。png |-组件//菲公你好. txt |-mixin |-index。js |-pages//绿筠小姐索引。js | | | >索引。SCS | | >索引。视图|-img |-流。png |-head _人像。jpg |-徽标。png |-vuess。png |-视图|-索引。js |-索引。SCS | | -索引。vista |-vu eclipse 3 |-索引。js |-索引。SCS |-索引。vista |-vuess |-index。js |-索引。SCS |-索引。vista |-vuex |-索引。js |-索引。SCS |-索引。SCS |-索引。vista |-路由器//你是谁