目录
1、先在package.json文件中添加: 2、在项目目录下建立 .env文件和.env.test文件 3、配置api变量 3.1、配置axios的baseURL路径 3.2、自己拼接的路径
4、.env知识点补充
4.1,关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件 4.2,关于内容 4.3,关于文件的加载: 4.4,关于.env文件的读取:
前言
通过不同命令行切换不同环境api等信息
例如:
npm run serve调用本地环境apinpm run test 调用测试环境apinpm run build 调用线上环境api
1、先在package.json文件中添加:
"scripts": {"dev": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","preview": "serve dist","test": "vue-cli-service build --mode test","production": "vue-cli-service build --mode production","development": "vue-cli-service build --mode development"},
知识点补充:
参数的名字可以根据跟人喜好来定义
vue cli 3
yarn serve \ npm run serve 是运行代码。
build是打包代码
而我们打包的时候,就把serve运行变成开发环境,build打包变成生产环境。
—mode后面添加test,是运行.env.test
没有加的情况下,serve是自动默认.env.development
build是自动默认.env.production
2、在项目根目录下建立 .env文件、.env.test、.env.development文件、.env.production文件
2.1、.env文件
NODE_ENV = 'development'VUE_APP_URL = 'dev'
2.2、.env.test文件
# 用来表示是生产环境还是开发环境NODE_ENV = 'production'# 用来表示是生产环境还是测试环境VUE_APP_FLAG = 'test'# 这个地址不能带引号,不然获取的就带引号# 测试环境VUE_APP_BASE_URL = /sso# 用来表示打包的名字outputDir = test
2.3、.env.development文件
# 页面标题VUE_APP_TITLE = sso-web# # 项目版本号VUE_APP_VERSION = V1.0# 开发环境配置NODE_ENV = 'development'VUE_APP_FLAG = 'development' # 开发环境VUE_APP_BASE_URL = http://10.60.36.245:8080/sso
2.4、.env.production文件
#页面标题VUE_APP_TITLE = 'sso-web'# 项目版本号VUE_APP_VERSION = V1.0# 生产环境配置NODE_ENV = 'production'VUE_APP_FLAG = 'production'# 正式环境VUE_APP_BASE_URL = /sso
知识点补充:
请看4
2.5、在vue.config.js文件中添加:
outputDir: process.env.outputDir,
3、配置api变量
这里配置需要因代码而异
module.exports = {// 部署应用时的基本 URL// 部署生产环境和开发环境下的URL:可对当前环境进行区分,baseUrl 从 Vue CLI 3.3 起已弃用,要使用publicPath// 基本路径,相对路径 或其他别名publicPath: process.env.NODE_ENV === "production" ? "./" : "./",// 输出文件目录outputDir: 'dist',// ...}
配置axios的baseURL路径
那么我们需要在main.js里面,配置axios的baseURL,根据不同的环境配置不同的代码
/*第一层if判断生产环境和开发环境*/if (process.env.NODE_ENV === 'production') {/*第二层if,根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境*/if (process.env.VUE_APP_FLAG === 'production') {//production 生产环境axios.defaults.baseURL = '/sso';} else {//test 测试环境axios.defaults.baseURL = '/sso';}} else {//serve 开发环境axios.defaults.baseURL = 'http://10.60.36.245:8080/sso';}
4、.env知识点补充
4.1,关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件
.env 全局默认配置文件,不论什么环境都会加载合并
.env.development 开发环境下的配置文件
.env.production 生产环境下的配置文件
4.2,关于内容
注意:属性名必须以VUE_APP_开头,比如设置其它变量 VUE_APP_NAME=stark
4.3,关于文件的加载:
根据启动命令vue会自动加载对应的环境,vue是根据文件名进行加载的,所以上面说“不要乱起名,也无需专门控制加载哪个文件”
比如执行npm run serve命令,会自动加载.env.development文件
注意:.env文件无论是开发还是生成都会加载的公用文件
如果我们运行npm run serve 就先加载.env文件,之后加载.env.development文件,两个文件有同一个项,则后加载的文件就会覆盖掉第一个文件,也即是.env.development文件覆盖掉了.env文件的NOOE_ENV选项。
如果我们需要加载私有的情况下,可以像test一样,-mode test ,当我们运行的时候,就是运行env.test文件
4.4,关于.env文件的读取:
可以通过index.vue\index.jsprocess.env 获取设置的变量