如何详细配置vue-cli3的开发与测试环境？

本文共计1378个文字，预计阅读时间需要6分钟。

需求+简介：本项目是一款基于vue-cli3.1.1的单页应用。目前测试环境和生产环境均已上线，且位于同一域名下。其中，生产环境部署在根目录下，测试环境部署在名为te的目录下。

需求

首先介绍一下本项目的背景，是基于 vue-cli3.1.1 的单页应用，目前测试环境和生产环境都在线上，并且都在同一个域名下，其中生产环境部署在根目录下，测试环境部署在名为 test 的子目录下，根据生产环境和测试环境的不同，某些界面和交互有细微的差别。

根据以上项目的基本情况，分析出需求如下：

• 实现区分线上生产环境和线上测试环境的环境变量，供项目代码中全局使用。
• 实现输入一行命令，执行两条指令，分别打包线上生产环境和线上测试环境的代码。
• 实现打包之后，自动将打包好的文件夹分别按照项目名+时间+环境的格式压缩成 zip 文件

配置环境变量和模式

根据 vue-cli3 文档，可以通过设置项目根目录下的 .env，.env.[mode] 文件来指定环境变量。