需求

首先介绍一下这个项目的背景，它是一个基于vue-cli3.1.1的单页应用，目前测试环境和生产环境都是在线的，都在同一个域名下，其中生产环境部署在根目录下，测试环境部署在名为test的子目录下。根据生产环境和测试环境的不同，有些接口和交互略有不同。

根据上述项目的基本情况，要求分析如下：

它可以区分在线生产环境和在线测试环境之间的环境变量，以便在项目代码中全局使用。输入一行命令，执行两条指令，分别封装在线生产环境和在线测试环境的代码。打包后，打包的文件夹会根据项目名称时间环境的格式自动压缩成zip文件，以配置环境变量和模式

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

创建一个. env和。env.beta文件在。env文件，配置如下：

VUE_APP_URL='/' //默认情况下，用于设置项目的基本URL和路由的基本选项是根目录。VUE_APP_MODE='' //设置一个变量来区分在线生产环境和在线测试环境。outputDir='dist' /用于设置打包后生成的文件夹名称，默认为dist folder。在。env.beta文件，配置在线测试环境

NODE_ENV='production' //因为是打包项目，所以也是production vue _ app _ URL='/test/'//在线测试环境。部署在测试目录中的变量VUE_APP_MODE='test' //表示在线测试环境当前为outputDir='beta' //将在线测试环境打包后生成的代码放在beta文件夹中以示区别。定义环境变量后，将项目建立的路径配置到路由和vue配置文件中：

//router.jsexport默认新建Router({ base : process . env . vue _ APP _ URL，})//Vue . config . js module . exports={ base URL : process . env . Vue _ APP _ URL，//从Vue CLI 3.3开始就被弃用，改为publicPath}在项目代码中，process.env.VUE_APP_MODE的值可以在任何地方用来判断是在线生产环境还是在线测试示例：

If(过程。env.vue _ app _ mode==' test') {this。name='在线测试用户' }配置不同模式的环境变量后，在package.json中设置一个beta模式：

{“脚本”: {.beta ' : ' vue-CLI-service build-mode beta ' } }此配置完成后，在命令行上运行npm run beta将在根目录中生成一个beta文件夹，其中包含打包的在线测试版本项目文件。

至此，子环境配置的打包已经完成，但麻烦的是我们每次都要在命令行上输入两次命令，因为我们的项目文件是发送到后端进行部署的，所以还是需要将文件压缩成zip，而且每次都要手动操作，有点累。所以需要进行一些小改造，彻底解放双手~ ~

合并构建打包命令并自动生成压缩文件

将两个命令组合成一个非常简单，只需在package.json中配置它，并创建一个新命令来同时调用两个命令。

{“脚本”: {.beta ' : ' vue-CLI-service build-mode beta '，' publish ' : ' vue-CLI-service build vue-CLI-service build-mode beta ' } }这样配置后，只要执行npm run publish，就会先自动执行正式环境构建和打包，完成后再自动执行测试环境构建和打包。轩方便~ ~

然后配置自动压缩，这里需要使用一个webpack插件-文件管理器-web pack-plugin。

先安装，可以在命令行安装，也可以直接在vue-cli3的图形化管理界面上搜索安装，非常方便。

NPM安装文件管理器-webpack-plugin-dev安装完成后，在vue.config.js中配置这个插件，它提供了丰富的操作文件的选项。在这里，我只需要删除和压缩：

让ts=日期。解析(新的Date())；module.exports={.chainWebpack:(配置)={ if(process。环境。vue _ APP _ MODE==' test '){ config。插件(“压缩”).使用(FileManagerPlugin，[{ OneD : { delete :[//首先需要删除项目根目录下的dist.zip ' ./*.zip '，]，archive: [ //然后我们选择距离文件夹将之打包成dist.zip并放在根目录{source: ' ./dist '，destination: ` ./BipPROJECt-$ { ts }-生产。zip `}，{source: ' ./beta '，destination: ` ./BipProject-$ { ts }-测试。zip `}]} }])} } PS:vue-cli3开发环境与生产环境的区分

在vue-cli3的项目中，

新公共管理运行服务时会把process.env.NODE_ENV设置为"发展";

新公共管理运行构建时会把process.env.NODE_ENV设置为"生产";

或，配置publicPath等：

公共路径：进程。ENV。node _ ENV===' production '？https://cdn。XXX。com/文件夹":";以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。