环境变量配置
-
在项目根目录中新建.env, .env.production, .env.pre 等文件
-
NODE_ENV 和 BASE_URL 是两个特殊变量，在代码中始终可用
-
一个环境文件只包含环境变量的“键=值”对:
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略
- .env 文件
- ====> 执行 npm run serve 默认的本地开发环境配置
// 默认的本地开发环境配置 每行后面不要加结束分号
NODE_ENV = "development"
BASE_URL = "./"
// 打包后文件夹名字;默认dist;要在vue.config.js 中配置
// 只有以 VUE_APP 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端的包中，
// 代码中可以通过 process.env.VUE_APP_BASE_API 访问 这样定义的值
// 在 vue.config.js 中可以获取到 outputDir ,但是在客户端代码中无法获取;
outputDir = "dist"
VUE_APP_API = "http://v.juhe.cn/joke"
- .env.production 文件
- ===>执行 npm run build 默认的环境配置（正式服务器）
// build 默认的环境配置（正式服务器）每行后面不要加结束分号
NODE_ENV = "production"
BASE_RUL = "./"
// 打包后文件夹名字;要在vue.config.js 中配置
outputDir = "dist_pro"
// 自定义的一些在客户端要获取的变量要以 VUE_APP_ 开头,不然无法获取到;
VUE_APP_OUT_PUTDIR = "dist_pro"
VUE_APP_API = "http://www.xxxx.com/api"
- .env.pre 文件
- ===>执行 npm run pre 自定义 build 环境配置（预发服务器）
//自定义 build 环境配置（预发服务器）每行后面不要加结束分号
NODE_ENV = "production"
BASE_URL = "./"
// 打包后文件夹名字; 要在vue.config.js 中配置
outputDir = "dist_pre"
VUE_APP_API = "http://www.自定义环境.com"
- package.json 一个模式有多中变量;
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"pre": "vue-cli-service build --mode pre"
}
注意模式不同于 NODE_ENV，一个模式可以包含多个环境变量。
也就是说，每个模式都会将 NODE_ENV 的值设置为模式的名称
比如在 development 模式下 NODE_ENV 的值会被设置为 "development"。;
你可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量。
比如，如果你在项目根目录创建一个名为 .env.development 的文件，
那么在这个文件里声明过的变量就只会在 development 模式下被载入。
你可以通过传递 --mode 选项参数为命令行覆写默认的模式。
例如，如果你想要在构建命令中使用开发环境变量，请在你的 package.json 脚本中加入;
"dev-build": "vue-cli-service build --mode development",
- index.vue
// index.vue 获取最新的笑话
axios.get("/api/content/text.php",
{ baseURL:process.env.NODE_ENV=="development"?'/':process.env.VUE_APP_API,
params:{key:'19a578542216aeb8a23ccf5b05a61449'},
headers:{'Content-Type':'application/json;charset=UTF-8'}
})
.then(res=>{
console.log('text result',res);
})
- http.js
// axios 封装,(示例demo 所以参数写死的);
// 本地开发环境的话要使用 devServer 代理来跨域;"development" 时 baseURL 设置为 "/";
// 使用devServer 代理时 baseURL不能设置值;
app.ajax = (url,method)=>{
return axios({
url:url,
baseURL:process.env.NODE_ENV=="development"?'/':process.env.VUE_APP_API,
method:method,
params:{
key:'19a578542216aeb8a23ccf5b05a61449'
},
data:{
sort:'desc',
page:1,
pagesize:10,
time:parseInt( new Date().getTime()/1000),
key:'19a578542216aeb8a23ccf5b05a61449'
},
headers:{'Content-Type':'application/json;charset=UTF-8'},
})
}
export default app;
跨域代理配置
- 本地开发时会涉及到跨域问题;至于在服务端 请加跨域请求头
- vue.config.js devServer 配置
// 注意使用devServer时 封装的 http 请求中,baseURL不能设置值;
module.exports = {
outputDir:process.env.outputDir || 'dist',
// 由于浏览器有跨域限制,这里cli 工具提供了 启动本地代理服务器 请求
devServer:{
open:false, // 是否打开浏览器;
hotOnly:true, // 是否热更新;
proxy:{
'/api':{ // 路径中有 /api 的请求都会走这个代理 , 可以自己定义一个,下面移除即可
target:'http://v.juhe.cn/joke', // 目标代理接口地址,实际跨域要访问的接口,这个地址会替换掉 axios.defaults.baseURL
secure:false,
changeOrigin:true, // 开启代理，在本地创建一个虚拟服务端
ws:true, // 是否启用 websockets;
pathRewrite:{ // 去掉 路径中的 /api 的这一截
'^/api':''
}
},
'/test':{
target:'http://v.juhe.cn/joke', // 目标代理接口地址,实际跨域要访问的接口,这个地址会替换掉 axios.defaults.baseURL
secure:false,
changeOrigin:true,
ws:true,
pathRewrite:{
'^/test':'',
}
}
},
}
}
- 示例完整代码github:[https://github.com/wJiaLiang/vue-cli4]
总结
- 代理配置 时 配置的主机地址 （即 baseURL） 应该为 "/"; 参考 http.js
- 真时的地址为 在 vue.config.js 中配置; 参考 vue.config.js 中 devServer 配置项
- 真时的接口地址为 'http://v.juhe.cn/joke/content/text.php'
- 浏览器看到的地址是: http://localhost:8080/api/content/text.php?key=19a578542216aeb8a23ccf5b05a61449