用环境变量让 Vue 项目变得更加灵活

在构建 Vue.js 项目时，经常需要处理动态生成的变量或根据不同的打包环境读取不同的配置文件。在开发阶段，可以通过设置环境变量来指定不同的配置，但在前端打包完成后，通常会需要在生产环境中使用不同的值。通过在 Vue 项目中使用环境变量，可以实现这些需求，让代码更加灵活和可维护。

一、配置 Webpack 和 Vue CLI 以支持环境变量

在 Vue.js 项目中使用环境变量需要对 Webpack 和 Vue CLI 进行一些配置。

1. 在 Vue.js 项目中安装 webpack-env 包：

npm install webpack-env --save-dev

2. 在 Vue.js 项目的 webpack.config.js 文件中添加 webpack-env 插件：

const webpack = require('webpack')
const WebpackEnv = require('webpack-env')

module.exports = {
  plugins: [
    new WebpackEnv()
  ]
}

3. 在 Vue CLI 项目的 vue.config.js 文件中添加 defineOptions 选项：

module.exports = {
  defineOptions: {
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  }
}

4. 在环境变量中定义需要使用的变量：

在终端中执行以下命令以设置环境变量：

export VUE_APP_API_URL=http://localhost:8080
export VUE_APP_PRODUCTION_URL=https://example.com

二、在 Vue 项目中使用环境变量

在 Vue 项目中，可以使用 process.env 对象访问环境变量。

1. 在组件中使用环境变量：

export default {
  computed: {
    apiUrl() {
      return process.env.VUE_APP_API_URL
    }
  }
}

2. 在文件中使用环境变量：

const apiUrl = process.env.VUE_APP_API_URL

三、环境变量的优点

使用环境变量可以带来许多好处，包括：

• 灵活性： 通过在环境变量中存储可变值，可以根据不同的构建环境轻松调整这些值，而无需修改代码。
• 可维护性： 通过将可变值存储在环境变量中，可以使代码更加简洁和易于维护。
• 可移植性： 通过将可变值存储在环境变量中，可以使代码更加容易在不同的环境中部署。

四、结语

通过在 Vue 项目中使用环境变量，可以提高代码的灵活性、可维护性和可移植性。这使 Vue 项目更易于适应不同的构建环境和打包配置，并简化了代码的维护和部署。

五、其他资源

• Vue.js 环境变量文档
• Webpack-env 包文档