Vue2 中的地址映射示例（访问本地 Json数据）

目录

一. 去 vue.config.js 中进行地址映射的示例 

二. 地址映射的原理

---

• 前言：Vue2 中，如何将 .json文件作为数据源进行访问呢？

---

一. 去 vue.config.js 中进行地址映射的示例 

• 我原来要访问的是 /api/movieOnInfoList 这个线上地址，但是做了 映射 之后，访问就自动跳转到了 http://localhost:8080
• 那么应该访问本地服务的哪个部分获取资源呢？也就是服务器下面的公共资源："/data/movieOnInfoList.json"
• 
• 综上所述，我原来要访问的是 /api/movieOnInfoList 这个线上地址，映射之后会自动跳转到 http://localhost:8080/data/movieOnInfoList.json 这个地址

• ---

  我们在代理中，匹配本地 json文件的那句话： "^/api/movieOnInfoList": "/data/movieOnInfoList.json"
• 前面的符号 ^，他的作用：无论线上接口 /api/movieOnInfoList 的前缀是什么，最后都被映射到某个 json文件

• ---

   
• 值得注意的是，接口映射可以不止一个，比如上面两个接口映射，匹配访问资源的顺序是自上而下的
• 注意：应该将详细的接口映射写在前面，将不详细的写在后面

---

二. 地址映射的原理

• Vue2 项目中，public 文件夹用于存放 公共资源，src 文件夹用于存放 私有源码
• 也就是说，在地址栏输入 localhost/src 是不能访问源码的，但是在地址栏中输入 localhost/public/data/xxx 是可以访问公共资源的
• 

• ---

  npm run serve 相当于开通了一个 node 服务，所以，服务开启后可以访问到的 public/data 文件夹，通常被用来放假的 json数据

• ---

  这样，就可以在组件中正常书写线上请求地址，在 vue.config.js 中对线上请求地址进行映射，将之更改为公共资源地址，当我们不需要假数据时，将映射地址也改为线上请求地址即可，这个过程也叫 代理