Die Vue-Entwicklungsumgebung und die Produktionsumgebung legen unterschiedliche Variablen fest

Bei der Vue-Entwicklung kommt es häufig vor, dass wir unterschiedliche Variablen in unterschiedlichen Umgebungen festlegen. Beispielsweise müssen wir in der Entwicklungsumgebung möglicherweise einige Debugging-Tools aktivieren und in der Produktionsumgebung müssen wir diese Debugging-Tools deaktivieren, um die Anwendungsleistung zu verbessern. Zu diesem Zeitpunkt müssen wir unterschiedliche Variablen in der Entwicklungsumgebung und der Produktionsumgebung festlegen.

Im Folgenden stellen wir vor, wie Sie verschiedene Variablen in Vue festlegen.

1. Einrichtung in Vue-Cli

Vue-Cli ist ein Gerüsttool für Vue.js, das alles integriert hat, was zum Entwickeln und Erstellen von Anwendungen benötigt wird. Wenn Sie Ihre Anwendung also mit Vue-Cli entwickeln, können Sie Variablen in der Konfigurationsdatei festlegen.

Zuerst müssen Sie eine Datei mit dem Namen .env. im Stammverzeichnis des Projekts erstellen und dann entsprechend Ihren Anforderungen am Ende den Namen der Umgebungsvariablen hinzufügen. Beispielsweise haben wir in dieser Datei eine Umgebungsvariable mit dem Namen VUE_APP_TEST wie folgt hinzugefügt: .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

🎜In Webpack festlegen🎜🎜🎜Wenn Sie nicht Vue-Cli, sondern das Webpack-Paketierungstool verwenden, können Sie es in der webpack.config.js festlegen Datei Umgebungsvariablen festlegen. 🎜🎜Zuerst müssen Sie webpack.DefinePlugin einführen und dann die Umgebungsvariable im Plugin festlegen, wie unten gezeigt: 🎜rrreee🎜Dann müssen Sie in der Komponente, in der Sie die Umgebungsvariable verwenden müssen, Sie können process.env.TEST übergeben, um den Wert dieser Umgebungsvariablen abzurufen. 🎜🎜Es ist zu beachten, dass Sie in Webpack Umgebungsvariablen manuell festlegen müssen, und zwar in jeder Umgebung, sodass dies relativ mühsam ist. 🎜
🎜In Node.js festlegen🎜🎜🎜Wenn Sie eine Vue-Anwendung in Node.js entwickeln, können Sie Umgebungsvariablen im serverseitigen Code festlegen. 🎜🎜Wenn der Server startet, können Sie die Umgebungsvariable über das Objekt process.env festlegen, wie unten gezeigt: 🎜rrreee🎜Dann können Sie dies in der Komponente tun, in der Sie die Umgebungsvariable verwenden müssen Übergeben Sie außerdem process.env.TEST, um den Wert dieser Umgebungsvariablen zu erhalten. 🎜🎜Es ist zu beachten, dass Sie bei Verwendung von Nuxt.js Umgebungsvariablen direkt in der Datei .env. festlegen können, was genauso praktisch ist wie Vue-Cli. 🎜🎜Zusammenfassung🎜🎜Unterschiedliche Entwicklungsumgebungen und Produktionsumgebungen erfordern unterschiedliche Variableneinstellungen. Mit Vue-Cli können Sie problemlos Variablen in der Konfigurationsdatei festlegen Datei Legen Sie Variablen fest, die in Node.js manuell im Servercode festgelegt werden müssen. 🎜🎜Es ist zu beachten, dass es in jedem Fall entsprechend Ihren spezifischen Bedürfnissen eingerichtet werden muss. 🎜

Das obige ist der detaillierte Inhalt vonDie Vue-Entwicklungsumgebung und die Produktionsumgebung legen unterschiedliche Variablen fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!