区分环境

一般是配置 .env .env.production 等。
默认配置就是用.env
示例：

VUE_APP_SRV = http://xxxxx/apiNODE_ENV='local'

封装下base_url

为啥要封装，因为开发模式需要proxy代理。。而线上模式不需要。

export function baseUrl() {return process.env.NODE_ENV === 'development' ? '/dev-api' : process.env.VUE_APP_SRV;
}

/dev-api 只要不和web里的path 冲突就行，也可以取其他名字。

axios 区分配置

开发模式就是web的路径，再加个特殊的path 用作代理。
其他模式不需要proxy配置，直接走api

const fetch = Axios.create({baseURL: baseUrl(),// baseURL: '/dev-api',timeout: 30000
});

其他注意事项

验证码和文件上传的url 一般就是写在组件里的。并不是用的axios, 但也会走proxy。

此时直接引用上面封装的baseUrl 就行。。

有时候会忘记，直接用了process.env.VUE_APP_SRV 导致验证码老通不过。因为不是一个域名。

proxy 配置

就是个代理模式，转发下请求。从浏览器请求变成内置的服务器请求，服务器请求是没有跨域一说的。

原来是浏览器a域名请求 -> 服务器b域名。 × 跨域错误
现在是浏览器a域名请求 -> 服务器a域名 api -> 服务器b域名api √正常。

服务器a域名 api 就是 proxy 干的。

配置示例

    devServer: {open:true,overlay: {warnings: false,errors: false,},proxy: {["/dev-api"]: {target: 'http:/b.com/api', // 服务器b域名apichangeOrigin: true,pathRewrite: {['^' + "/dev-api"]: ''}}},disableHostCheck: true},

vue.config.js 跨域配置相关推荐

vue.config.js多页配置
vue.config.js多页配置,具体看代码: "use strict"; const path = require("path"); var webpack ...
vue.config.js中lintOnSave配置
在vue.config.js文件中配置了lintOnSave属性作用:设置是否在开发环境下每次保存代码时都启用 eslint验证. value: false:关闭每次保存都进行检测 true:开启每 ...
Vue项目全面解析vuecil3/vuecil4的vue.config.js等常用配置
前端变化日新月异,层出不穷,公司原项目使用vuecil2版本开发,elementUI等一系列库版本太低,也脱离世界很久远了,新版本库需要webpack4等环境,而老版本配置起来bug很多,在使用过程中 ...
vue项目升级(01)：全面解析vuecil3/vuecil4的vue.config.js等常用配置
前言前端变化日新月异,层出不穷,公司原项目使用vuecil2版本开发,elementUI等一系列库版本太低,也脱离世界很久远了,新版本库需要webpack4等环境,而老版本配置起来bug很多,在使用 ...
vue使用axios请求相关配置文件包括跨域配置
对axios进行封装方便后续使用(request.js) import axios from 'axios'const request = axios.create({timeout: 5000 }) ...
(三)01 -Vue项目打包发布移动App——vue.config.js中配置相对路径publicPath为空字符串在public中添加HBuilderX的打包配置文件manifest.json
Vue 项目打包发布移动 App--npm run build打包 & vue.config.js文件中配置相对路径publicPath为空字符串 & 在 public中添加HBuil ...
vue.config.js ：配置webpack（文件传输大小受限）The following asset(s) exceed the recommended size limit (244 KiB)
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impac ...
26、vue前端出现跨域问题，如何解决跨域？
问题: 因为浏览器的同源策略的限制问题(协议.主机.端口一致),浏览器访问非同源的网址时,会出现无法获取数据(已发请求,服务器已收到请求),出现跨域问题 3种解决方法: 1.cors跨域(配置服务器) ...
UniApp H5 跨域代理配置并使用（配置manifest.json、vue.config.js）
UniApp 运行到浏览器的时候,接口会跨域报错,这里通过两种方式解决,二选一即可. 修改或调整配置文件后,推荐重新运行,以防不生效. 配置完成后,请求接口显示 Please enable JavaS ...

vue.config.js 跨域配置