vue-cli3 配置开发与测试环境详解

一文掌握vue-cli3配置开发与测试环境：长沙网络推广实践分享

一、项目背景与需求

我们有一个基于vue-cli3.1.1的单页应用项目，目前生产环境和测试环境均部署在线，且位于同一域名下。生产环境部署在根目录，而测试环境则部署在名为test的子目录下。基于这样的项目背景，我们需要解决以下核心需求：

1. 实现线上生产环境与线上测试环境的环境变量区分，以便在项目代码中全局使用。

2. 实现一行命令操作，完成线上生产环境和线上测试环境的代码打包。

3. 打包完成后，自动将打包好的文件夹压缩成zip文件，并按照“项目名+时间+环境”的格式进行命名。

二、配置环境与模式

vue-cli3为我们提供了通过.env文件设置环境变量的便捷方式。我们可以根据文档指导，在项目根目录下创建.env和.env.[mode]文件来指定环境变量。

在.env文件中，我们设置如下变量：

VUE_APP_URL：用于设置项目的baseUrl和路由的base选项，默认是根目录‘/’。

VUE_APP_MODE：用于区分线上生产环境和线上测试环境，默认设置为生产环境。

outputDir：用于设置打包后生成的文件夹名称，默认为dist文件夹。

针对线上测试环境，我们在.env.beta文件中进行如下配置：

NODE_ENV：因为是打包项目，所以此变量仍为production。

VUE_APP_URL：线上测试环境的部署目录，设置为‘/test/’。

VUE_APP_MODE：标识当前为线上测试环境，设置为‘test’。

outputDir：线上测试环境打包后生成的代码存放的文件夹，设置为‘beta’以示区别。

配置好环境变量后，我们需要在项目的路由配置文件和vue配置文件中使用这些变量。例如，在router.js中，我们将base设置为process.env.VUE_APP_URL。在vue.config.js中，我们使用process.env.VUE_APP_URL来配置baseUrl（注意：从Vue CLI 3.3起，baseUrl已被弃用，改为publicPath）。

接下来，我们可以在项目代码的任意位置通过process.env.VUE_APP_MODE的值来判断当前是线上生产环境还是线上测试环境，从而编写不同的业务代码。例如：

```javascript

if(process.env.VUE_APP_MODE == 'test'){

this.name = '线上测试用户';

}

```

三、分环境配置打包与自动化优化

配置好不同模式的环境变量后，我们需要在package.json中设置一个beta模式以便执行对应的打包命令。这样，在命令行运行npm run beta，就会自动执行打包命令并生成beta文件夹，里面是线上测试版本的项目文件。但是每次打包完成后还需要手动压缩文件稍显繁琐。为此，我们可以借助一些工具或者编写脚本来实现打包后的自动压缩功能。这里可以留作后续的改进方向或者研究如何实现。至此我们已经完成了分环境的配置打包工作。通过这样的配置，我们可以轻松地在不同的环境下运行和打包项目代码，为项目的开发和测试带来了极大的便利。长沙网络推广希望这个分享能够给大家提供一些帮助和参考。随着我们的持续和实践，我们将不断优化我们的配置和流程以适应不断变化的项目需求。重构后的文本如下：

在 Vue CLI 3 项目中，构建和发布流程可以通过配置脚本来实现自动化。想象一下，只需要执行一个命令，就可以完成正式环境和测试环境的构建打包，这简直是非常方便的。这种便捷性是通过配置一些特定的 npm 脚本来实现的。

让我们深入了解这个过程。在你的项目脚本中，你可以设置特定的命令来执行不同的构建任务。比如，"beta" 命令可以执行测试环境的构建打包，而 "publish" 命令则可以同时执行正式环境和测试环境的构建打包。只需简单地运行 npm run publish，就可以自动完成整个流程。

为了进一步提高效率，你还可以配置自动压缩功能。这里，我们可以使用一个名为 filemanager-webpack-plugin 的 webpack 插件。这个插件提供了丰富的文件操作选项，在本次配置中，我们只需要使用删除和压缩功能。

安装这个插件非常简单，你可以通过 npm 安装，也可以在 vue-cli3 的图形管理界面进行安装。安装完成后，在 vue.config.js 文件中进行配置。根据你的需求，当构建过程结束时，这个插件可以自动删除一些不必要的文件，并将构建的结果压缩成 zip 文件。

在 Vue CLI 3 项目中，我们还可以利用环境变量来区分开发环境和生产环境。例如，当运行 npm run serve 时，process.env.NODE_ENV 被设置为 'development'，而运行 npm run build 时，则被设置为 'production'。这样我们就可以根据不同的环境进行不同的配置。

除此之外，我们还可以配置 publicPath 来指定资源的公共路径。根据环境的不同，我们可以将 publicPath 设置为不同的值。例如，在生产环境下，我们可以将静态资源部署到 CDN 上，而在开发环境下，则可以直接使用本地路径。

通过合理配置脚本和插件，我们可以大大提高 Vue CLI 3 项目的开发效率和自动化程度。希望这篇文章能对你有所帮助，也希望大家能多多支持狼蚁SEO。

使用 cambrian.render('body') 来渲染本文的内容。