.env .env.development .env.production文件
.env 无论开发环境还是生产环境都会加载的配置文件
.env.development 开发环境加载的配置文件
.env.production 生产环境加载的配置文件
配置文件里的属性名必须以`VUE_APP_`开头,例如:VUE_APP_QQQ = `QQ`
然后就可以在代码中这样引用:process.env.VUE_APP_QQQ
a、根据Node环境变量'NODE_ENV'的值来选择加载'development'还是'production'
b、比如我们平常通过`npm run serve`启动时,我们本地系统的环境变量`NODE_ENV` 值
默认是`development`,这时就会先后加载`.env`和`.env.development`这两个件。
c、而当我们打包到服务器后,服务器的`NODE_ENV`值一般为`production`,则此时Vue仍
会先加载`.env`文件,然后加载`.env.production`文件。
d、其次,在按顺序加载文件时,`Vue`会把后一个加载的文件内容和前面加载的文件内
容进行比较,如果存在变量名相同,那么它会`采用后一个文件里的变量值为变量的最终值`。
查看项目的环境变量
NODE_ENV:主要用于标识当前的环境(生产环境,开发环境),默认是没有这个环境变量的,需要自己手动配置。

proxy代理
target : 代表监测到以 /abc 开头的接口后,把axios请求中前面的本地服务器地址改为后端接口地址
changeOrigin : 是否跨域
ws : 如果要代理 websockets,配置这个参数
secure : 如果是https接口,需要配置这个参数(如果是http接口,也可以不写这个参数)
pathRewrite :替换请求中匹配的内容。
使用axios进行前设置(适用于target相同的代理)
例:axios.defaults.baseURL = "/api"(只要发送axios请求,就在请求前加入/api的开头)
vue配置不同环境(package.json)
"scripts": {
"serve": "vue-cli-service serve --mode development",
"test": "vue-cli-service serve --mode test",
"production": "vue-cli-service serve --mode production" ,
"build":"vue-cli-service build --mode development",
"prodbuild":"vue-cli-service build --mode production",
"testbuild":"vue-cli-service build --mode test"
},
vue.config.js 的 devServer
1、设置 host 选项,指定主机;如果设置为 "localhost",则只能被本机访问;
如果想要被外部访问,则需设置为 "0.0.0.0";
2、设置 port 选项,指定一个端口号,并监听来自这个端口的请求;
3、设置 https 选项,false 表示使用 HTTP;
4、设置 open 选项,true 表示启动应用之后自动打开默认浏览器。
5、disableHostCheck:true 是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查。
6、hot: true, 开启热加载
7、compress:配置是否启用 gzip 压缩。boolean 为类型,默认为 false。
axios拦截器
request.interceptors.request.use(function (conf) {
const orgId = getOrgId()
const orgName = getOrgName()
conf.headers['Content-Type'] = 'application/json'
if (orgId) {
conf.headers['x-auth-org-id'] = orgId
conf.headers['x-gasc-uid'] = getUuid()
}
if (orgName) {
conf.headers['x-auth-org-name'] = Base64.encode(orgName)
}
if (!conf.hideLoading) {
commonLoading.show('拉取数据中,请稍候...')
}
if (conf.cancel) {
conf.cancelToken = new axios.CancelToken((cancel) => {
window.__axiosArr.push({
cancel
})
})
}
return conf
})
request.interceptors.response.use(resolve, reject)
function resolve(res) {
const data = res.data || {}
if (res.config && !res.config.hideLoading) {
commonLoading.hide()
}
if (
+data[config.apiReturnDefine.errcode] !== 0 &&
+data[config.apiReturnDefine.errcode] !== 200
) {
const errorCode = data[config.apiReturnDefine.errcode] || ''
if (res.status === 200 && errorCode === '') {
return {
errcode: 0,
errmsg: 'SUCCSS',
data,
}
}
if (config.debugModel) {
console.warn(
'接口非0啦!错误信息看这里!',
'\n responseURL:',
res.request.responseURL,
'\n data: ',
res.data,
'\n all message: ',
res
)
}
return Promise.reject(data)
}
if (typeof data[config.apiReturnDefine.data] !== 'undefined') {
return data[config.apiReturnDefine.data]
}
return data
}
function reject(error) {
if (error.config && !error.config.hideLoading) {
commonLoading.hide()
}
console.error('=====> response error: ', error.response)
return Promise.reject(error)
}
axios
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
处理并发请求的助手函数:
axios.all(iterable)、axios.spread(callback)
axios.all([fn1(),fn2()]).then((fn1,fn2)=>{
console.log(res1,res2)
})
axios.all()、axios.spread()这两个函数来处理多个请求,该方法是axios的静态方法,不是axios实例方法!
axios.create([config]):
`url` 是用于请求的服务器 URL
`method` 是创建请求时使用的方法
`baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
`headers` 是即将被发送的自定义请求头
`maxRedirects` 定义在 node.js 中 follow 的最大重定向数目,如果设置为0,将不会 follow 任何重定向
`params` 是即将与请求一起发送的 URL 参数,无格式对象(plain object)或 URLSearchParams 对象
`data` 是作为请求主体被发送的数据,只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'