在 vue 开发中，我们很常见要在不同的环境下设置不同的变量。例如在 development 环境下，我们可能需要打开一些调试工具，而在 production 环境下，我们则需要关闭这些调试工具来提高应用的性能。这时候，我们就需要在开发环境和生产环境下设置不同的变量。
下面，我们将介绍如何在 Vue 中设置不同的变量。
在 Vue-Cli 中设置
Vue-Cli 是 Vue.js 的脚手架工具，它内置了开发和构建应用程序所需的一切配置。因此，如果你使用 Vue-Cli 开发应用程序，则可以在其配置文件中设置变量。
首先，你需要在项目的根目录下创建一个名为
的文件，然后根据你的需要在后面添加环境变量的名称。例如，我们在该文件中添加了一个名为
的环境变量，如下所示：
然后，在你需要使用该环境变量的组件中，你可以通过
来获取该环境变量的值。
立即学习
“
前端免费学习笔记（深入）
”；
需要注意的是，在 Vue-Cli 中，所有以
开头的变量都会被自动注入到应用程序中，并且只有在
变量设置为
或
时才能正常工作。
在 Webpack 中设置
如果你没有使用 Vue-Cli，而是使用了 Webpack 打包工具，则可以在
文件中设置环境变量。
首先，你需要引入
，然后在该插件中设置环境变量，如下所示：
然后，在你需要使用该环境变量的组件中，你可以通过
来获取该环境变量的值。
需要注意的是，在 Webpack 中，你需要手动设置环境变量，并且需要在每个环境中都进行设置，因此相对比较麻烦。
在 Node.js 中设置
如果你是在 Node.js 中开发 Vue 应用程序，则可以在服务端代码中设置环境变量。
在服务器启动时，你可以通过
对象来设置环境变量，如下所示：
然后，在你需要使用该环境变量的组件中，你也可以通过
来获取该环境变量的值。
需要注意的是，如果你使用的是 Nuxt.js，则可以直接在
文件中设置环境变量，和 Vue-Cli 一样方便。
总结
不同的开发环境和生产环境需要不同的变量设置，使用 Vue-Cli 可以方便地在配置文件中设置变量，使用 Webpack 可以在
文件中设置变量，而在 Node.js 中则需要在服务端代码中手动设置。
需要注意的是，无论哪种方式，都需要根据你的具体需求进行设置。
.env.VUE_APP_TESTVUE_APP_TEST=hello worldprocess.env.VUE_APP_TESTVUE_APP_NODE_ENVdevelopmentproductionwebpack.config.jswebpack.DefinePluginconst webpack = require('webpack')
module.exports = {
// ...
plugins: [
new webpack.DefinePlugin({
TEST: JSON.stringify('hello world')
})
]
}process.env.TESTprocess.envprocess.env.TEST = 'hello world';process.env.TEST.env.webpack.config.js