L'environnement de développement Vue et l'environnement de production définissent différentes variables-Questions et réponses frontales-php.cn

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

王林

Libérer： 2023-05-24 09:55:37

original

780 Les gens l'ont consulté

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.

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

Copier après la connexion

然后，在你需要使用该环境变量的组件中，你可以通过 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')
    })
  ]
}

Copier après la connexion

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

需要注意的是，在 Webpack 中，你需要手动设置环境变量，并且需要在每个环境中都进行设置，因此相对比较麻烦。

在 Node.js 中设置

如果你是在 Node.js 中开发 Vue 应用程序，则可以在服务端代码中设置环境变量。

在服务器启动时，你可以通过 process.env 对象来设置环境变量，如下所示：

process.env.TEST = 'hello world';

Copier après la connexion

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

需要注意的是，如果你使用的是 Nuxt.js，则可以直接在 .env. 文件中设置环境变量，和 Vue-Cli 一样方便。

总结

不同的开发环境和生产环境需要不同的变量设置，使用 Vue-Cli 可以方便地在配置文件中设置变量，使用 Webpack 可以在 webpack.config.jsrrreee

Ensuite, dans le composant où vous devez utiliser cette variable d'environnement, vous pouvez passer process.env. VUE_APP_TEST pour obtenir la valeur de cette variable d'environnement.

Il est à noter que dans Vue-Cli, toutes les variables commençant par VUE_APP_ seront automatiquement injectées dans l'application, et seulement lorsque la variable NODE_ENV est définie sur développement ou la production fonctionnera correctement. 🎜

webpack.config.js

webpack.DefinePlugin

process.env.TEST

process.env

process.env.TEST

.env.

webpack.config.js

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!