vue cli3 实现分环境打包的步骤

实现分环境打包的步骤大致如下：

1. 在项目根目录下创建 .env.development，.env.production，.env.test 等环境变量配置文件，分别对应开发环境、生产环境、测试环境等。其中，.env 文件是默认的主配置文件，所有环境的公共的变量都可以写在这个文件中，具体变量值可以在其他环境文件中覆盖。

示例1：在 .env 文件中设置公共变量，并在 .env.development 文件中覆盖其中一个变量：

// .env 文件中设置公共变量
BASE_URL=http://localhost:8080

// .env.development 文件中覆盖其中一个变量
BASE_URL=http://localhost:3000

1. 在 package.json 文件中添加 NPM Scripts 命令，用于切换环境变量。例如，我们在 scripts 中添加以下内容：

"serve": "vue-cli-service serve",
"build-test": "vue-cli-service build --mode test",
"build-prod": "vue-cli-service build --mode production",

其中，serve 命令是默认的开发环境启动命令，build-test 和 build-prod 分别是打包测试环境和生产环境的命令。

示例2：执行命令 npm run build-test 可以打包测试环境的代码。

1. 在项目中使用环境变量。在项目中使用时，只需要使用 process.env 对象来获取环境变量即可。例如：

axios.defaults.baseURL = process.env.BASE_URL

其中，axios 是一个常用的网络请求库，这里将其请求的基础 URL 设置为环境变量中的地址。

以上就是实现分环境打包的步骤，注意要在代码中合理使用环境变量，并且在打包时指定对应的环境。利用这种方法可以极大提升项目的开发效率和可维护性。