从0到1构建vueSSR项目之node以及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请求地址来进行要渲染的页面。
大概的方式就是 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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
详解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南
正如Vue官方所说,SSR配置适合已经熟悉 Vue, webpack 和 Node.js 开发的开发者阅读.请先移步ssr.vuejs.org了解手工进行SSR配置的基本内容. 从头搭建一个服务端渲染的应用是相当复杂的.如果您有SSR需求,对Webpack及Koa不是很熟悉,请直接使用NUXT.js. 本文所述内容示例在 Vue SSR Koa2 脚手架 : https://github.com/yi-ge/Vue-SSR-Koa2-Scaffold 我们以撰写本文时的最新版:Vue 2,Web
-
从0到1构建vueSSR项目之node以及vue-cli3的配置
前言 上一次做了路由的相关配置,原本计划今天要做vuex部分,但是想了想,发现vuex单独的客户端部分穿插解释起来很麻烦,所以今天改做服务端部分. 服务端部分做完,再去做vuex的部分,这样就会很清晰. vue ssr是分两个端,一个是客户端,一个是服务端. 所以要做两个cli3的配置. 那么下面就直接开始做吧. 修改package.json的命令 //package.json :client代表客户端 :server代表服务端 //使用VUE_NODE来作为运行环境是node的标识 //cli
-
从0到1构建vueSSR项目之路由的构建
vue开发依赖的相关配置 Vue SSR 指南 今天先做客户端方面的配置,明天再做服务端的部分. 那么马上开始吧~ 修改部分代码 脚手架生成的代码肯定是不适合我们所用的 所以要修改一部分代码 //App.vue <template> <div id="app"> <router-view></router-view> </div> </template> <script> export default
-
如何构建 vue-ssr 项目的方法步骤
如何通过 web 服务器去渲染一个 vue 实例 构建一个极简的服务端渲染需要什么 web 服务器 vue-server-renderer vue const Vue = require('vue') const Koa = require('koa') const app = new Koa() const Router = require('koa-router') const router = new Router() const renderer = require('vue-serve
-
Android中使用Gradle来构建App项目的入门指南
gradle是Android开发中引入的全新的构建系统,因为全新的构建系统主要是出于下面的目的: 1. 方便复用代码和资源 2. 构建多种版本的apk更见简单,不论是为多渠道构建不同的apk还是构建不同环境的apk(debug,release) 3. 方便配置,扩展,自定义构建过程 4. 良好的IDE集成 为什么选择Gradle? Gradle主要有以下几个有点: 1. 使用领域驱动语言(DSL)来描述构建逻辑 2. 构建脚本使用Groovy,可以方便的定制构建逻辑 3. 内建的依赖管理系统,使
-
Eclipse 使用Maven构建SpringMVC项目
首先Eclipse需要安装Maven的插件,地址:http://m2eclipse.sonatype.org/sites/m2e. 用MyEclipse安装Maven插件,建出的Maven项目有些问题.一是,发布tomcat的时候resources总是不会被发布到tomcat下:二是,把WEB-INF下的classes改到target下的classes,但是不知道为什么MyEclipse要么仍然在WEB-INF下生成class.要么真不在WEB-INF生成classes了但是发布tomcat的时
-
ASP.NET2.0+SQL Server2005构建多层应用第1/4页
[推荐]ASP.NET2.0+SQL Server2005构建多层应用!!!!!@申请加分!@@! [sell=5]随着.NET 2.0的发布,将会使得使用ASP.NET 2.0来构建的Web应用越来越容易.使用ASP.NET 2.0和SQL Server 2005,将会比ASP.NET 1.1更方便地构建多层体系架构的web应用.本文,将使用ASP.NET 2.0和SQL Server 2005 (.net使用Visual Studio 2005 beta 2,SQL Server 2005使
-
Vue 2.0在IE11中打开项目页面空白的问题解决
前言 因为工作的需要,学习Vue2.0也有一段时间,最近在用Vue2.0的官方脚手架工具构建的项目,chrome中跑一直没有问题,但ie11打开出现了bug: 问题 ie11打开vue2.0项目空白,控制台报错 vuex requires a Promise polyfill in this browser: 原因 Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API ,比如 Iterator.Generator.Set.Maps.Proxy.Reflec
-
VueCli3构建TS项目的方法步骤
使用vue-cli3构建Typescript项目 import 和 require require: 以同步的方式检索其他模块的导出 (开发) import: 动态地加载模块 (生产) 相关文档:module methods vue-cli3 vue create project-name vue-cli3配置, 生成目录结构: │ .browserslistrc │ .gitignore │ .postcssrc.js // postcss 配置 │ babel.config.js │ cyp
-
springboot学习之构建简单项目搭建步骤详解
概述 相信对于Java开发者而言,spring和springMvc两个框架一定不陌生,这两个框架需要我们手动配置的地方非常多,各种的xml文件,properties文件,构建一个项目还是挺复杂的,在这种情况下,springboot应运而生,他能够快速的构建spring项目,而且让项目正常运行起来的配置文件非常少,甚至只需要几个注解就可以运行整个项目. 总的说来,springboot项目可以打成jar包独立运行部署,因为它内嵌servlet容器,之前spring,springMvc需要的大量依赖,
-
vue-cli3单页构建大型项目方案
一.vue-cli3单页面构建方案 1.在目标文件夹内执行 vue ui ; 一个ui版界面,用于创建vue项目: 2.打开router文件夹内的index,看情况配置router的模式,是默认的hash还是history?ps:个人推介history模式,因为内嵌如app的H5页面的话,有可能某些app是不允许页面上带有'#'的,而hash会在url上利用#来做路由转发.ps:history模式在发布到服务器上需要nginx配置一下.详情请自行百度. const router = new Vu