vue-cli3.0配置不同的网址（根据不同的环境进行网址切换）_vue3怎么切换接口地址用的是env还是env.dev

在生产环境和开发环境的时候，有些变量是不一样的，比如接口，打包的时候就需要切换，

所以配置下环境变量，通过不同命令行切换不同环境api等信息
（1）先在package.json文件中添加：

"scripts": {
    "dev": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode prd",
  },
1
2
3
4

在运行后面加上 --mode 新增的文件后缀

（2-1）在项目目录下建立 .env.dev文件和.env.prd文件

.env.dev文件
NODE_ENV = development
VUE_APP_BASIC_API = dev
env.prd文件
NODE_ENV = production
VUE_APP_BASIC_API = prd
1
2
3
4
5
6

然后在src目录下新建文件夹utils ----》建文件config.js

config.js文件

let BackUrl = null;
let BasiUrl  = process.env.VUE_APP_BASIC_API

if(BasiUrl === 'dev') {
　　　　BackUrl = '开发环境的网址'
}else if(BasiUrl === 'prd') {
　　　　BackUrl = '生产环境的网址'
}
export default BackUrl
1
2
3
4
5
6
7
8
9

(2-2)在项目目录下建立 .env.dev文件和.env.prd文件

.env.dev文件

NODE_ENV='dev'
VUE_APP_URL='http://192.168.1.86:8080/'
1
2

env.prd文件

NODE_ENV=prd
VUE_APP_URL=线上域名
1
2

在main.js文件中
console.log(process.env) //打印看一下数据

另外在vue-config.js文件中

module.exports = {
    lintOnSave: false,
    outputDir: `dist-${process.env.NODE_ENV}` 
}
1
2
3
4

然后在axios封装中引入即可