vue项目中的环境变量的应用

news2024/12/24 9:04:00

vue项目中的环境变量的应用

在Vue项目中使用环境变量可以方便地在开发、测试、生产等不同环境中进行配置，而无需修改代码。

项目根目录下创建一个.env文件或者.env.[mode]文件，其中mode表示开发、测试、生产等不同的环境，文件名的后缀部分指定了该文件所属的环境.

.env.development：表示开发环境下的.env配置文件，该文件用于配置开发环境下的环境变量；
.env.test：表示测试环境下的.env配置文件，该文件用于配置测试环境下的环境变量；
.env.production：表示生产环境下的.env配置文件，该文件用于配置生产环境下的环境变量。

在这里插入图片描述

process.env.NODE_ENV(自带)

process.env.NODE_ENV是一个用于获取Node.js进程中环境变量的属性。在使用Webpack或者Vue CLI等工具构建应用程序时，该属性通常用于判断当前应用程序的运行环境，以便根据不同的环境执行不同的代码。

在Vue.js中，process.env.NODE_ENV的值会根据环境变量的类型而有所不同。通常有以下三种类型：

development：开发环境。
production：生产环境。
test：测试环境。

在Vue项目中使用环境变量的步骤：

**1.**在项目根目录下.env.development(开发环境)、.env.test(测试环境)、.env.production(生产环境)。在以上三个文件中可以定义项目使用的环境变量，如：

VUE_APP_BASE_API=http://localhost:8080/api
VUE_APP_DEBUG=true

其中以VUE_APP_开头的变量会被自动注入到Vue的全局变量中，可以在代码中通过process.env来访问。如：

console.log(process.env.VUE_APP_BASE_API) // http://localhost:8080/api
console.log(process.env.VUE_APP_DEBUG) // true

**2.**在项目中需要使用环境变量的地方，使用process.env来访问变量即可

例如，在axios中使用环境变量定义API接口地址：

import axios from 'axios'

const api = axios.create({
  baseURL: process.env.VUE_APP_BASE_API
})

export default api

此时，不同环境下的接口地址会自动根据不同的环境变量进行注入。

**3.**在package.json中通过–mode参数指定使用哪个环境的配置文件。

"scripts": {
  "serve": "vue-cli-service serve --mode development",
  "build": "vue-cli-service build --mode production"
}

这样就可以在不同的命令中指定不同的环境配置文件，从而实现不同环境下的配置。

(拓展)配置webpack排除打包时,根据环境变量设置是否排除

在Webpack中，可以使用module.exports来配置打包相关的配置，其中可以通过exclude选项来指定排除某些文件或文件夹。如果需要根据环境变量动态地设置是否排除某些文件或文件夹，可以使用process.env来访问环境变量，然后在Webpack配置文件中根据环境变量的值来设置exclude选项。

以下是一种基于环境变量设置排除选项的实现方法：

**1.**在.env文件中定义EXCLUDE_DIR变量，指定需要排除的文件或文件夹路径，例如：

EXCLUDE_DIR=dist

**2.**在Webpack配置文件中使用process.env来获取设定的环境变量，例如：

const path = require('path')

module.exports = {
  // ...其它配置...

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: process.env.EXCLUDE_DIR ? new RegExp(path.join(process.env.EXCLUDE_DIR, '/')) : null
        // 排除dist文件夹中的所有文件
      },
      // ...其它规则...
    ]
  }
}