打包优化-在nodejs环境中布署应用

目标

将打包好的代码打包上线(本地模拟)

前端修改生产环境下的baseUrl

前端修改生产环境的 baseUrl

.env.production

VUE_APP_BASE_API = 'http://ihrm-java.itheima.net'

重新打包

使用 koa 框架部署项目

到现在为止，我们已经完成了一个前端工程师的开发流程，按照常规的做法，此时，运维/后端会将我们的代码部署到阿里云的nginx服务上，对于我们而言，我们可以将其部署到本机的nodejs环境中

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

history路由模式-熟悉两种路由模式

目标

了解两种单页应用的路由模式，清楚它们的区别

两种单页应用的路由模式

hash模式

hash模式 ：使用 URL 的 hash 来模拟一个完整的 URL, 其显示的网络路径中会有 “#” 号

hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash后刷新, 也不会有问题

hash模式示例: http://localhost:8080/#/home http://localhost:8080/#/user

原理： hashChange

history模式

history模式： 美化后的hash模式，路径中不包含“#”。依赖于Html5 的 history api

由于改变了地址, 刷新时会按照修改后的地址请求后端, 需要后端配置处理, 将地址访问做映射, 否则会404

history模式示例: http://localhost:8080/home http://localhost:8080/user

原理： popState, pushState()

vue项目修改路由模式

修改路由模式从hash转变为history模式

开发到现在，我们一直都在用hash模式，打包我们尝试用history模式

改成history模式非常简单，只需要将路由的mode类型改成history即可。在src/router/index.js中

// 创建路由实例
const createRouter = () => new Router({
  mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  // 指定路由规则
  routes: [
    ...constantRoutes // 静态路由, 首页
  ]
})

配置好之后，我们访问路径不再需要加#号同样运行正常，这是因为 webpack 默认配好了对于 history 模式的处理

在nodejs环境中布署应用-解决history

将history模式下打包的代码放置服务器运行，出错:浏览器一刷新就会出现页面丢失的问题

原因

首次运行

再次刷新

为什么hash模式刷新不报错

解决history页面访问问题

安装 koa中间件

npm install koa2-connect-history-api-fallback #专门处理history模式的中间件

注册中间件

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 再测试)

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

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

修改环境变量

.env.production

VUE_APP_BASE_API = '/api'

安装跨域代理中间件

hr-serve

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