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