Vue多环境配置--切换生产环境、测试环境和开发环境

 情况一：有build和config文件夹

一：Vue项目搭建成功后，config和build文件夹都存在

知道有这两个文件夹后，接下来就该配置环境变量以及对应的模式了。

首先，看一下package.json中配置的启动方式：

从中，可以看出使用npm run dev启动项目时，dev走的文件是build下面的webpack.dev.conf.js文件

那么，我们去看一下webpack.dev.conf.js文件中是如何配置的，

这时，可以发现最终寻找的文件是config/dev.env文件

知道这一点之后，我们就可以在config/dev.env文件中将我们想要切换的开发模式以及对应的地址放入其中了：

在具体使用的文件中，想要获取环境变量，按照如下填写：

这时候开发地址和环境变量就配置好了，生产环境和测试环境与此类同

在package.json中添加prod和test，分别对应webpack.prod.conf.js和webpack.dev.test.js即可

2.在build文件夹中添加对应的webpack.prod.conf.js和

webpack.dev.test.js，其中test文件复制prod文件即可。（改一下引用路径）

   3.将对于的config文件中的prod.env和test.env文件补全

prod.env文件:

test.env文件：

最终，在使用不同的启动命令时，可启动不同的环境

生产：npm run prod

开发：npm run dev

测试：npm run test

情况二：使用cli3.x或者4.x没有build和config文件夹

1、根目录下新建文件：.env.development（开发环境）、.env.test（测试环境）、.env.production文件（生产环境）

2、三个配置文件的配置内容如下：

.env.development（开发环境）配置内容

.env.test（测试环境）配置内容

.env.production文件（生产环境）配置内容

3、修改vue.config.js

module.exports = { // 基本路径，相对路径 publicPath: "./", // 输出文件目录 outputDir: process.env.outputDir,}

4、修改package.json文件

5、判断并使用不用的开发环境配置