1. 首先安装插件,并修改启动项

1. 安装cross-env 跨平台切换插件兼容好,
   -作用: 切换环境变量
   例如:
   不同的打包和运行命令切换不同的配置变量
   安装命令:

npm i cross-env -D

"scripts": {
    "serve": "cross-env type=dev vue-cli-service serve",
    "build": "cross-env type=prod vue-cli-service build"
  }

2. 安装 process 插件 是node中读取nodejs总环境变量的所用参数
   作用:在这里用来读取webpack配置的环境变量
   安装命令:

npm i process -D

2. 好的准备完成,开始操作

vue项目用vue.config.js来配合不同环境自动切换配置

vue.config.js文件:

module.exports = {
    chainWebpack: cofig => {
        cofig.plugin('define').tap(args => {
            console.log("env",process.env.type)//拿取在上面package.json 配置的自定义webpack的环境
            args[0]['process.env'].type = process.env.type//将这个值设置到webpack的默认环境变量中
            console.log('aaa', args)
            return args;
        })
    }
}

在其他文件:

     console.log("env",process.env.ages.type)//在其他文件进可以读取到了

视图: