当我们把代码打包优化好之后，前端的使命也就完成了，如果你想自己模拟产品上线，我们可以将其部署到本机的node.js环境中
1.建立web服务文件夹 hrServer
2.在该文件夹下，初始化npm
npm init -y
3.安装服务端框架koa(也可以采用express或者egg)
npm install koa koa-static
4.hrServer中新建public目录，并拷贝打包的dist目录内容，到 hrServer/public 下
5.在根目录下创建app.js，代码如下
const Koa = require('koa')
const serve = require('koa-static');
const app = new Koa();
app.use(serve(__dirname + "/public")); //将public下的代码静态化
app.listen(3333, () => {
console.log('项目启动: 3333端口')
})
6.运行命令,并把地址改成自己的IP地址+3333端口
node app.js
7.解决history页面访问问题
安装 koa中间件
npm install koa2-connect-history-api-fallback #专门处理history模式的中间件
注册中间件
app.js
const Koa = require('koa')
const serve = require('koa-static');
+ const { historyApiFallback } = require('koa2-connect-history-api-fallback');
const app = new Koa();
// 这句话 的意思是除接口之外所有的请求都发送给了 index.html
+ app.use(historyApiFallback({
whiteList: ['/api']
})); // 这里的whiteList是 白名单的意思
app.use(serve(__dirname + "/public")); //将public下的代码静态化
app.listen(3333, () => {
console.log('人资项目启动')
})
此时解决了刷新 404 的问题 (注意: 如果点了登录, 记得清除cookies 再测试)
8.在nodejs环境中解决生产环境跨域问题
问题
此时我们点击登录，接口是不通的，我们需要在生产环境配置一下跨域，原理和我们之前用vue-cli配置的原理是一致的，都是通过中间的服务器经过转发去代理真实的接口
修改环境变量
.env.production
VUE_APP_BASE_API = '/api'
9.安装跨域代理中间件
npm install koa2-proxy-middleware
const Koa = require('koa')
const serve = require('koa-static');
const { historyApiFallback } = require('koa2-connect-history-api-fallback');
const proxy = require('koa2-proxy-middleware')
const app = new Koa();
app.use(proxy({
targets: {
'/api/(.*)': {
target: 'http://ihrm-java.itheima.net', //后端服务器地址
changeOrigin: true
}
}
}))
// 这句话 的意思是除接口之外所有的请求都发送给了 index.html
app.use(historyApiFallback({
whiteList: ['/api']
})); // 这里的whiteList是 白名单的意思
app.use(serve(__dirname + "/public")); //将public下的代码静态化
app.listen(3333, () => {
console.log('项目启动')
})
