vue-cli 脚手架3+

参考：https://blog.csdn.net/guochanof/article/details/90182409

1、目录结构：https://segmentfault.com/a/1190000014456796

2、配置 代理：https://segmentfault.com/a/1190000014474361?utm_source=channel-hottest  或 https://blog.csdn.net/huangjianfeng21/article/details/92005441（推荐比较详细）

　  注意：代理的匹配越精准 越好，不然 如果页面的url 也匹配到 到，就会把 页面url 也给转发了。

　  案例【同事出现的问题】：vue-cli 中的 代理就碰到过两次这种 匹配不精准导致的 问题。一次是 下面的代理匹配规则，把上面的匹配规则包含了。导致上面的的代理 一直 是用下面的代理转发，导致错误。

　　　　　　　　　 　　　　 另 外一次是 代理的匹配 规则中 把页面 url 页 页 给匹配进去了，导致 页面 url 发送请求时，也被转发处理了，获取不到正确的页面。　　

　  动态代理 的实现 ： 代理地址改变，不需要重启 webpack。 

　　　方案1：代理 地址 使用域名，host文件修改域名绑定的ip地址。【会有限制，公司的电脑没有给你管理员权限，就修改不了host文件。大部分公司是这样的】

　　　方案2： https://blog.csdn.net/sinat_36521655/article/details/111992824

　　　　　　 思路：要用到的代理地址 全部写到 配置上(一般用 函数实现，代码会简洁些)。项目的src目录中，请求 匹配字段 改变，前端重新编译。请求时，会找到代理中对应的那个代理地址。

　　　　　　【这种方式，也可以实现不动代码实现，实现切断代理地址。就是加一个按钮，可以切换 项目 中 接口的匹配字段】

3、使用history模式的路由：https://blog.csdn.net/qq_42881675/article/details/103006905  或   https://blog.csdn.net/weihaifeng163/article/details/100603315（推荐）

　　路由配置： router.js

export default new Router({
  mode: 'history',
  base: 'root-dir', // 需要配置此项来设置路由的基础路径，不然路由表只会按根路径来匹配
  routes: [
    {
      name: 'Root',
      path: '/',
      component:Root
    },
    {
      path: '*',
      redirect: { name: 'Root' }
    }
  ]
})

View Code