L'environnement de développement Vue et l'environnement de production définissent différentes variables

Dans le développement de Vue, il est très courant que nous définissions différentes variables dans différents environnements. Par exemple, dans l'environnement de développement, nous devrons peut-être activer certains outils de débogage, et dans l'environnement de production, nous devons désactiver ces outils de débogage pour améliorer les performances des applications. À l'heure actuelle, nous devons définir différentes variables dans l'environnement de développement et l'environnement de production.

Ci-dessous, nous présenterons comment définir différentes variables dans Vue.

1. Configuré dans Vue-Cli

Vue-Cli est un outil d'échafaudage pour Vue.js qui intègre tout le nécessaire pour développer et créer des applications. Ainsi, si vous développez votre application à l'aide de Vue-Cli, vous pouvez définir des variables dans son fichier de configuration.

Tout d'abord, vous devez créer un fichier nommé .env. dans le répertoire racine du projet, puis ajouter le nom de la variable d'environnement à la fin selon vos besoins. Par exemple, nous avons ajouté une variable d'environnement nommée VUE_APP_TEST dans ce fichier comme suit : .env. 的文件，然后根据你的需要在后面添加环境变量的名称。例如，我们在该文件中添加了一个名为 VUE_APP_TEST 的环境变量，如下所示：

VUE_APP_TEST=hello world

然后，在你需要使用该环境变量的组件中，你可以通过 process.env.VUE_APP_TEST 来获取该环境变量的值。

需要注意的是，在 Vue-Cli 中，所有以 VUE_APP_ 开头的变量都会被自动注入到应用程序中，并且只有在 NODE_ENV 变量设置为 development 或 production 时才能正常工作。

2. 在 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 中，你需要手动设置环境变量，并且需要在每个环境中都进行设置，因此相对比较麻烦。

3. 在 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.jsrrreee

🎜Défini dans Webpack🎜🎜🎜Si vous n'utilisez pas Vue-Cli, mais utilisez l'outil de packaging Webpack, vous pouvez le définir dans le webpack.config.js fichier Définir les variables d'environnement. 🎜🎜Tout d'abord, vous devez introduire webpack.DefinePlugin, puis définir la variable d'environnement dans le plugin, comme indiqué ci-dessous : 🎜rrreee🎜Ensuite, dans le composant où vous devez utiliser la variable d'environnement, vous pouvez passer process.env.TEST pour obtenir la valeur de cette variable d'environnement. 🎜🎜Il convient de noter que dans Webpack, vous devez définir les variables d'environnement manuellement, et vous devez les définir dans chaque environnement, c'est donc relativement gênant. 🎜
🎜Défini dans Node.js🎜🎜🎜Si vous développez une application Vue dans Node.js, vous pouvez définir des variables d'environnement dans le code côté serveur. 🎜🎜Lorsque le serveur démarre, vous pouvez définir la variable d'environnement via l'objet process.env, comme indiqué ci-dessous : 🎜rrreee🎜Ensuite, dans le composant où vous devez utiliser la variable d'environnement, vous pouvez passez également process.env.TEST pour obtenir la valeur de cette variable d'environnement. 🎜🎜Il est à noter que si vous utilisez Nuxt.js, vous pouvez définir les variables d'environnement directement dans le fichier .env., ce qui est aussi pratique que Vue-Cli. 🎜🎜Résumé🎜🎜Différents environnements de développement et environnements de production nécessitent des paramètres de variables différents. L'utilisation de Vue-Cli peut facilement définir des variables dans le fichier de configuration. À l'aide de Webpack, vous pouvez définir des variables dans le webpack.config.js. fichier Définir les variables qui, dans Node.js, doivent être définies manuellement dans le code du serveur. 🎜🎜Il est à noter que dans tous les cas, il doit être configuré en fonction de vos besoins spécifiques. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!