环境变量 : 为不同环境设置不同变量
开发环境 : (develpment) 生产环境(production)
根目录创建文件 .env.develpment(开发环境) .env.
production(生产环境)
在文件中设置相应环境的变量
//.env.develpment # just a flag ENV = 'development' # base api VUE_APP_BASE_API = 'development'
// .env.production # just a flag ENV = 'production' # base api VUE_APP_BASE_API = 'production'
接口基地址:VUE_APP开头
VUE_APP_BASE_API = ''' 环境接口基地址
注意 ENV = '' 是用来区分是生产环境还是开发环境的
VUE_APP_BASE_API = '' 用来配置相对应的服务器域名信息
npm run serve 开发: process.env.VUE_APP_BASE_API === aaa
npm run build 生产: process.env.VUE_APP_BASE_API === bbb
创建axios实例的时候配置
当我们运行npm run dev进行开发调试的时候,此时会加载执行.env.development
文件内容
当我们运行npm run build:prod进行生产环境打包的时候,会加载执行.env.production
文件内容
//package.json 文件下
"scripts": {
"dev": "vue-cli-service serve",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging",
"preview": "node build/index.js --preview",
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
"lint": "eslint --ext .js,.vue src",
"test:unit": "jest --clearCache && vue-cli-service test:unit",
"test:ci": "npm run lint && npm run test:unit"
},
所以,如果想要设置开发环境的接口,直接在.env.development
中写入对于port变量的赋值即可
# 设置端口号
port = 8888
修改服务的配置文件,想要生效的话,必须要重新启动服务,值‘8888’后面不能留有空格