本文已参与[新人创作礼]活动，一起开启掘金创作之路。
一. 前言
前端使用history模式打包后将dist文件夹发送给后端。出问题了后，你发现你这边没有问题，但是后端也说他那边没有问题说是你的问题。你由于刚进入职场没什么底气，此时你完全可以使用Node简单搭建一个服务器来初步处理，看看到底是谁的问题，如果你这边测试没有问题，底气足点怼回去。
二. 简单了解单页面应用的三种路由模式
1. hash：
使用` URL` 的` hash `来模拟一个完整的 `URL`, 其显示的网络路径中会有 "`#`" 号
`hash` 虽然出现在`URL`中，但不会被包含在`HTTP`请求中，对后端完全没有影响，因此改
变`hash`后刷新, 也不会有问题
原理
`hashChange`（原生事件），主要是通过事件监听`hash`值得变化
<a href='#/aaa'>1</a>
window.onHashChange=function(){}
2. abstract：
支持所有`JS`运行环境，如`Node.js`服务器端，如果发现没有浏览器的`API`，路由会自动强制进
入此模式
3. history：
实际工作中常用
美化后的hash模式，路径中不包含"#"。依赖于Html5 的 history api
由于改变了地址, 刷新时会按照修改后的地址请求后端, 需要后端配置处理, 将地址访问做映射, 否则会404
4. 路由模式的切换：
src/router/index.js
// 创建路由实例
const createRouter = () => new Router({
mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
// 指定路由规则
routes: [
...constantRoutes // 静态路由
]
})
配置好之后，我们访问路径不再需要加"#"号同样运行正常，这是因为 webpack 默认配好了对于 history 模式的处理
三.准备工作
1. 新建一个文件夹extral,在该文件夹下，初始化npm
npm init -y
2. 新建一个public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
home
</body>
</html>
3. 创建一个app.js（后面都是在extral文件夹进行操作）
（1）这里使用的是koa
记得下包npm i koa koa-static
const Koa = require('koa')
const serve = require('koa-static');
const app = new Koa();
app.use(serve("./public")); //将public下的代码静态化
app.listen(3333, () => {
console.log('http://127.0.0.1:3333')//模拟地址
})
（2）在extral中创建一个http.js，这里使用的是express两者效果相同，我们在后面使用的koa
下包npm i express
const express=require('express')
const app=express()
// app.get('/',(req,res)=>{
// res.send('1111')
// })
// 静态服务
app.use(express.static('./public'))
app.listen(2000,()=>{
console.log('http://127.0.0.1:2000');
})
4. 在命令行中打印node .\app.js即可输出http://127.0.0.1:3333此时我们使用ctrl+单击即可打开链接
该链接http://127.0.0.1:2000侦听的就是静态服务中的./public,就会去访问其中的index.html
和下方的效果是相同的
四. 解决history刷新后白屏问题
1. 安装 koa中间件(专门处理history模式的中间件)
npm install koa2-connect-history-api-fallback
2. 注册中间件
const Koa = require('koa')
const serve = require('koa-static');
/* 解决history页面刷新出现白屏，404，Not found */
const { historyApiFallback } = require('koa2-connect-history-api-fallback')
// 这句话 的意思是除接口之外所有的请求都发送给了 index.html
const app = new Koa();
app.use(
historyApiFallback({
whiteList: ['/api'],
})
) // 这里的whiteList是 白名单的意思
app.use(serve("./dist")); //将dist下的代码静态化
app.listen(3333, () => {
console.log('http://127.0.0.1:3333')
})
运行后我们会发现白屏已经成功解决
五. 解决跨域问题
1.同一服务器
正常情况我们访问的地址就是我们上方网址的地址，这里我们只是做模拟，所以只需要将之转为base.url所对应服务器地址使之同源即可
2.不同服务器（主要）
const Koa = require('koa')
const serve = require('koa-static');
/* 解决history页面刷新出现404 */
const { historyApiFallback } = require('koa2-connect-history-api-fallback')
// 这句话 的意思是除接口之外所有的请求都发送给了 index.html
const app = new Koa();
app.use(
historyApiFallback({
whiteList: ['/api'],
})
) // 这里的whiteList是 白名单的意思
const proxy = require('koa2-proxy-middleware')
app.use(
proxy({
targets: {
'/api/(.*)': {
target: 'http://www.nbcls.cn', //后端服务器地址
changeOrigin: true,
},
},
})
)
app.use(serve("./dist")); //将public下的代码静态化
app.listen(3333, () => {
console.log('http://127.0.0.1:3333')
})
六. 之后我们根据相应的问题即可针对性的查找和解决
注意：更改之后记得要重新打包一次dist并拉取到extral文件夹中
