使用 vue 的同学们大都是基于 vue-cli 来搭建项目的, vue-cli 中的配置全面强大.
- // 常用的命令
- NPM run dev // 本地热更新模式
- NPM run build // 生产模式 会在根目录下打包出一个 dist 文件夹, 直接放在服务器上就可以使用了
开发阶段与后台同学进行数据交互 (调试接口)
本机与服务器之间会出现跨域问题
跨域报错
解决办法
在 NPM run dev 执行后, 项目会在本地 node 中执行. vue-cli 中提供了非常方便的代理方式.
直接上代码 根目录 / config/index.JS 中, 搜索 proxyTable, 把它改成如下对象
- proxyTable: {
- '/api': { // 使用 "/api" 来代替 "http://baidu.com"
- target: 'http://baidu.com', // 源地址
- changeOrigin: true, // 改变源
- pathRewrite: {
- '^/api': '/' // 路径重写
- }
- }
- }
这段代码的意思是用 / API 带代替请求地址的域名
为了方便使用, 需要不同环境下的不同配置
根目录 / config/dev.env.JS
这里面是本地 dev 环境的配置
- module.exports = merge(prodEnv, {
- // 你的其他的一些配置...
- // ...
- // 本地调试环境下的请求地址 / API
- // 对应代理的 / API 配置
- API_ROOT: '"/api"',
- })
根目录 / config/prod.env.JS
这里面是生产 build 环境的配置
- module.exports = {
- // 你的其他的一些配置...
- // ...
- API_ROOT:'"实际生产环境的请求地址"',
- }
修改类似执行配置都需要
重新 NPM run dev
重新 NPM run dev
重新 NPM run dev
配置完工后, 我们找到 src/main.JS
这里用 axios 为例
- import Vue from 'vue'
- import axios from 'axios'
- // process.env.API_ROOT 就得到了上面不同环境下的 API_ROOT
- const baseUrl = process.env.API_ROOT
- // 把 baseUrl 挂载到 Vue 原型上, 方便组件内部使用
- Vue.prototype.baseUrl = baseUrl;
- // axios 也挂载到原型上 this.$http 就指向 axios
- Vue.prototype.$http = axios;
OK, 一切配置就绪, 我们在任一地方就可以使用了
- // 组件内使用 axios
- // 不同的配置下, this.baseUrl 的值就不同
- this.$http.post(`${this.baseUrl}/aaa/xxx`, {
- id: 123
- }).then(res => {
- // 请求成功...
- })
所有配置已完成
需要注意的是
本地环境下查看浏览器的 Network
本地环境下, 请求的 ip 地址变成了本机的 ip, 后面还会跟上一个 / API, 说明代理是成功的.
例如浏览器上请求地址 (这是代理地址)
192.168.0.0:8080/API/xxx
但其实真正请求的地址是
根目录 / config/index.JS 配置的地址 + /xxx
来源: http://www.jianshu.com/p/189f6e0a4c98