如何配置环境变量

环境变量 : 为不同环境设置不同变量

开发环境 : (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’后面不能留有空格