vue-cli4环境变量配置和代理跨域配置
环境变量配置
-
在项目根目录中新建.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':'',
}
}
},
}
}
cli 服务使用命令
vue-cli-service serve
用法:vue-cli-service serve [options] [entry]
选项:
--open 在服务器启动时打开浏览器
--copy 在服务器启动时将 URL 复制到剪切版
--mode 指定环境模式 (默认值:development)
--host 指定 host (默认值:0.0.0.0)
--port 指定 port (默认值:8080)
--https 使用 https (默认值:false)
如: vue-cli-service serve --open --mode dev
命令行参数 [entry] 将被指定为唯一入口 (默认值:src/main.js,TypeScript 项目则为 src/main.ts),而非额外的追加入口。
尝试使用 [entry] 覆盖 config.pages 中的 entry 将可能引发错误。
vue-cli-service build
用法:vue-cli-service build [options] [entry|pattern]
选项:
--mode 指定环境模式 (默认值:production)
--dest 指定输出目录 (默认值:dist)
--modern 面向现代浏览器带自动回退地构建应用
--target app | lib | wc | wc-async (默认值:app)
--name 库或 Web Components 模式下的名字 (默认值:package.json 中的 "name" 字段或入口文件名)
--no-clean 在构建项目之前不清除目标目录的内容
--report 生成 report.html 以帮助分析包内容
--report-json 生成 report.json 以帮助分析包内容
--watch 监听文件变化
vue-cli-service build 会在 dist/ 目录产生一个可用于生产环境的包,带有 JS/CSS/HTML 的压缩,
和为更好的缓存而做的自动的 vendor chunk splitting。它的 chunk manifest 会内联在 HTML 里。
npm run build 传入参数
设置参数:
npm run build -- --username=kg
获取:
process.argv 返回一个数组
[
'D:\\z_install\\node16\\node.exe',
'D:\\Z_Project\\node_modules\\@vue\\cli-service\\bin\\vue-cli-service.js',
'build',
'--username=kg'
]
- 示例完整代码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