关于vue设置环境变量全流程

下面详细介绍关于Vue设置环境变量的全流程。

什么是环境变量

在计算机中，环境变量是一组设置在操作系统中的变量，用于指定操作系统或正在运行的程序所需的特定信息。在Vue.js中，我们通常使用环境变量来指定不同环境下的配置信息，例如：开发环境下的API接口地址和生产环境下的API接口地址等。

设置环境变量

配置方式一：使用dotenv

dotenv是一个非常方便的库，可以将环境变量从系统或者命令行中获取，然后挂载到process.env对象中，方便我们在代码中获取到。

1. 安装dotenv：在终端中输入以下命令：

npm install dotenv --save

1. 创建.env文件

在项目根目录下创建一个名为.env的文件，将需要的环境变量存储在其中。例如：API接口地址的环境变量名为VUE_APP_API_URL，则在.env文件中存储方式如下：

VUE_APP_API_URL=http://localhost:3000

1. 在main.js中引入dotenv并运行

在main.js中引入dotenv，并运行dotenv.config()，表示读取.env文件中的环境变量。例如：

require('dotenv').config()

1. 在代码中使用环境变量

在代码中使用process.env即可访问.env中的环境变量。例如获取API接口地址：

const apiUrl = process.env.VUE_APP_API_URL

配置方式二：使用webpack.DefinePlugin

webpack.DefinePlugin是webpack的一个插件，用于在编译时创建全局常量，在Vue项目中可以使用它来设置环境变量。

1. 在webpack.config.js中配置DefinePlugin

在项目的webpack.config.js文件中添加如下代码：

const webpack = require('webpack')

const env = process.env.NODE_ENV

const defineEnv = (key, value) => ({
  [`process.env.${key}`]: JSON.stringify(value),
})

module.exports = {
  // 省略其他配置
  plugins: [
    // DefinePlugin配置
    new webpack.DefinePlugin({
      ...defineEnv('VUE_APP_API_URL', env === 'production' ? 'http://api.production.com' : 'http://localhost:3000'),
    }),
  ],
  // 省略其他配置
}

代码中做了如下配置：

• 获取环境变量：const env = process.env.NODE_ENV
• 定义一个函数：defineEnv，用于将环境变量转为webpack.DefinePlugin所需的变量格式。

• 将 VUE_APP_API_URL 设置为本机地址或线上接口地址。

• 在代码中使用环境变量

在使用就像常量一样去使用，例如：

const apiUrl = process.env.VUE_APP_API_URL

这就是使用webpack.DefinePlugin设置环境变量的完整流程。你可以将API接口地址、布尔类型、数字类型等设置为全局环境变量，然后在整个项目中使用这些全局变量。

示例说明

这里提供两个示例来说明如何设置环境变量：

示例一：设置API接口地址

1. 安装dotenv

终端中输入以下命令：

npm install dotenv --save

1. 在项目根目录下创建一个名为.env的文件

VUE_APP_API_URL=http://localhost:3000

1. 在main.js中引入dotenv并运行

require('dotenv').config()

1. 在代码中使用

const apiUrl = process.env.VUE_APP_API_URL

示例二：设置环境变量

在webpack.config.js中配置DefinePlugin

const webpack = require('webpack')

const env = process.env.NODE_ENV

const defineEnv = (key, value) => ({
  [`process.env.${key}`]: JSON.stringify(value),
})

module.exports = {
  // 省略其他配置
  plugins: [
    // DefinePlugin配置
    new webpack.DefinePlugin({
      ...defineEnv('VUE_APP_API_URL', env === 'production' ? 'http://api.production.com' : 'http://localhost:3000'),
      ...defineEnv('VUE_APP_DEBUG', env === 'production' ? false : true),
    }),
  ],
  // 省略其他配置
}

这个示例中定义了两个环境变量：VUE_APP_API_URL和VUE_APP_DEBUG。VUE_APP_API_URL的值被设置为本机或线上地址，VUE_APP_DEBUG的值则是由当前环境决定。

const apiUrl = process.env.VUE_APP_API_URL
const isDebug = process.env.VUE_APP_DEBUG === 'true'

这就是设置Vue环境变量的完整攻略，希望能对你有所帮助。