Vue 人资 实战篇十一 改变路由模式(hash模式改为history模式)、性能分析和CDN的运用、在node.js环境中应用并代理跨域

1.0 打包之前的路由模式

**目标**配置打包之前的路由模式

在SPA单页应用中，有两种路由模式

hash模式 ： #后面是路由路径，特点是前端访问，#后面的变化不会经过服务器

history模式：正常的/访问模式，特点是后端访问，任意地址的变化都会访问服务器

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

1. 改成history模式非常简单，只需要将路由的mode类型改成history即可

const createRouter = () => new Router({
   
  mode: 'history', // require service support
  scrollBehavior: () => ({
    y: 0 }), // 管理滚动行为 如果出现滚动 切换就让 让页面回到顶部
  routes: [...constantRoutes] // 改成只有静态路由
})

假设我们的地址是这样的 www.xxxx/com/hr/a www.xxxx/com/hr/b

2. 我们会发现，其实域名是**www.xxxx/com**，hr是特定的前缀地址，此时我们可以配置一个base属性，配置为hr

const createRouter = () => new Router({
   
  mode: 'history', // require service support
  base: '/hr/', // 配置项目的基础地址
  scrollBehavior: () => ({
    y: 0 }), // 管理滚动行为 如果出现滚动 切换就让 让页面回到顶部
  routes: [...constantRoutes] // 改成只有静态路由
})

3. 此时，我们会发现地址已经变成我们想要的样子了

	localhost:8888/hr/login

2.0 性能分析和CDN的应用

目标： 对开发的应用进行性能分析和CDN的应用

2.1 性能分析

我们集成了 功能，写了很多组件，最终都会打包成一堆文件，那么真实运行的性能如何呢？

我们可以使用vue-cli本身提供的性能分析工具，对我们开发的所有功能进行打包分析

npm run preview -- --report

这个命令会从我们的**入口main.js**进行依赖分析，分析出最大的包，方便我们进行观察和优化

执行完这个命令，我们会看到如下的页面 （复制下面的那个网址打开他）

如图所以，方块越大，说明该文件占用的文件越大，文件越大，对于网络带宽和访问速度的要求就越高，这也就是我们优化的方向

像这种情况，我们怎么优化一下呢

2.2 webpack排除打包

CDN是一个比较好的方式

文件不是大吗？我们就不要把这些大的文件和那些小的文件打包到一起了，像这种xlsx,element这种功能性很全的插件，我们可以放到CDN服务器上，一来，减轻整体包的大小，二来CDN的加速服务可以加快我们对于插件的访问速度

使用方式

先找到 vue.config.js， 添加 externals 让 webpack 不打包 xlsx 和 element

vue.config.js ( 添加在 configureWebpack 里面， 跟 name 平级)

 // 排除 elementUI xlsx  和 vue 
// key(是要排除的包名：value(实际上是实际引入的包的全局的变量名))
// 因为要排除 element-ui 所以后面要引入CDN文件 CDN文件中有 ELEMENTUI 的全局变量名
  externals:
      {
   
        'vue': 'Vue',
        'element-ui': 'ELEMENT',
        'xlsx': 'XLSX'