前端模拟上线 解决上线后跨域问题 在nodejs环境中布署应用

正常项目上线流程就是我们前端把需要上线的有效代码放在服务器上，服务器的维护就是后端的事了

当前目标：将打包好的代码打包上线(本地模拟)

1.使用 koa 框架部署项目

1.1.建立web服务文件夹 hrServer

1.2.在该文件夹下，初始化npm

npm init -y

1.3.安装服务端框架koa(也可以采用express或者egg)

npm install koa koa-static

1.4.hrServer中新建public目录，将打包好的项目 dist 拷贝到hrServer/public下

1.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端口')
})

2.解决history路由模式白屏问题

如果是hash模式就不需要解决什么问题
如果是history模式急需要解决刷新后白屏报404的问题
history刷新白屏原因 >>>>>

2.1.安装 koa中间件
专门处理history模式的中间件

npm install koa2-connect-history-api-fallback 

2.2.注册中间件
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 再测试)

3.在nodejs环境中解决生产环境跨域问题

3.1.问题
此时我们点击登录，接口是不通的，我们需要在生产环境配置一下跨域，原理和我们之前用vue-cli配置的原理是一致的，都是通过中间的服务器经过转发去代理真实的接口
3.2.安装跨域代理中间件

npm install koa2-proxy-middleware

3.3.配置跨越代理

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('人资项目启动')
})

3.4.修改环境变量
做了数据代理那环境变量就不是直接访问服务器了而是访问数据代理
在项目里的 .env.production修改环境变量

VUE_APP_BASE_API = '/api'

4.重新打包项目

npm run build

将打包好的项目 dist 拷贝到hrServer/public下