vue-cli3环境变量与分环境打包的方法示例

下面是关于“vue-cli3环境变量与分环境打包的方法示例”的详细说明：

什么是环境变量？

在编写前端代码时，我们常常会遇到需要在不同的环境（如开发环境、测试环境、生产环境）使用不同的配置的情况，比如不同的 API 地址、不同的请求路径等等。这时我们就需要使用环境变量来解决这个问题。

环境变量是一种全局可用的变量，可以在应用程序的任何地方访问它们，不仅如此，我们可以在不同的环境中设置不同的环境变量来实现不同环境下的不同数据获取。

在 Vue 项目中，我们可以使用环境变量来完成这一操作。

如何设置 vue-cli3 项目中的环境变量？

vue-cli3 提供了一种非常方便的方式来设置环境变量，通过在项目根目录下新建不同的 .env.[mode] 文件来配置不同的环境变量。

其中，[mode] 可以为如下几种：

• .env：默认的环境变量文件，适用于所有环境。
• .env.development：开发环境的环境变量文件。
• .env.test：测试环境的环境变量文件。
• .env.production：生产环境的环境变量文件。

在这些环境变量文件中，我们可以定义一个或多个变量，例如：

VUE_APP_TITLE=My App
VUE_APP_API_URL=http://localhost:3000

由于 Vue CLI 使用了 dotenv 库，我们可以在 Vue 项目代码中使用这些环境变量：

console.log(process.env.VUE_APP_TITLE)  // My App
console.log(process.env.VUE_APP_API_URL)  // http://localhost:3000

需要注意的是，这些变量名必须以 VUE_APP_ 开头，以便被识别为 Vue CLI 的环境变量，并在编译时添加到应用程序中。

如何在 vue-cli3 项目中分环境打包？

在实际项目中，不同的环境之间不仅仅可能存在配置文件的差异，还可能存在需要打包到不同目录或者生成不同文件名等多种差异，因此单纯的使用环境变量来区分环境是远远不够的，我们还需要对不同环境进行分环境打包。

Vue CLI3 通过 vue.config.js 文件来配置打包相关选项，其中，我们可以通过 config 对象来访问环境变量：

const ENV = process.env.NODE_ENV  // 获取当前环境

module.exports = {
  // ...
  configureWebpack: {
    // ...
  }
  // ...
}

我们可以根据环境变量来配置不同的打包选项，在 vue.config.js 中定义如下配置选项：

const ENV = process.env.NODE_ENV  // 获取当前环境

module.exports = {
  publicPath: './',  // 配置打包后的资源路径
  outputDir: 'dist/' + ENV,  // 配置打包后的目标文件夹
  filenameHashing: true  // 配置生成的文件名是否包含 hash 值
}

在上述配置中，我们将 outputDir 设置为 'dist/' + ENV，即在不同环境中指定不同的打包目标文件夹。

需要注意的是，如果你修改了 outputDir，那么你还需要在你的 index.html 中手动指向这个新的目标文件夹，例如：

<link rel="icon" href="<%= BASE_URL %>dist/<%= process.env.NODE_ENV %>/favicon.ico">

这里的 <%= process.env.NODE_ENV %> 就表示当前环境变量所对应的目标文件夹。

示例 1：生产环境下的分环境打包

我们假设，我们的生产环境需要将打包文件压缩成 zip 包，那么我们就可以在 vue.config.js 中添加如下配置：

const ENV = process.env.NODE_ENV

const UglifyPlugin = require("uglifyjs-webpack-plugin")
const ZipPlugin = require('zip-webpack-plugin')

module.exports = {
  publicPath: './',
  outputDir: 'dist/' + ENV,
  filenameHashing: true,
  configureWebpack: config => {
    if (ENV === 'production') {
      // 生产环境下
      config.optimization = {
        minimizer: [
          new UglifyPlugin({
            uglifyOptions: {
              compress: {
                // 省略 log
                drop_console: true
              }
            }
          })
        ]
      }
      // 打包为 zip 文件
      config.plugins.push(new ZipPlugin({
        filename: `dist.zip`
      }))
    }
  }
}

在上面的配置中，我们只在生产环境下配置了压缩和打包处理，而开发环境和测试环境则只使用了默认的配置，不需要多余的操作。

示例 2：不同环境下的 API 接口地址配置

我们假设，在开发环境中我们调用的 API 接口是开发环境的接口，而在测试和生产环境中调用的接口却是不同的，那么我们就可以通过环境变量来配置 API 接口的地址，例如：

在 .env.development 文件中添加：

VUE_APP_API_URL=http://localhost:3000

在 .env.test 文件中添加：

VUE_APP_API_URL=https://api.test.com

在 .env.production 文件中添加：

VUE_APP_API_URL=https://api.example.com

然后在代码中使用这些环境变量，例如：

const API_URL = process.env.VUE_APP_API_URL
axios.get(API_URL + '/user/info')

在以上代码中，我们通过 process.env.VUE_APP_API_URL 获取了当前环境下配置的 API 地址，然后通过 axios 发送请求。这样我们就可以在不同的环境下使用不同的 API 地址。

希望这些示例能够帮助你更好地理解 Vue CLI3 环境变量和分环境打包的用法。