Was sind die neuen Funktionen nach dem Upgrade von vue-cli 3.0.x auf webpack4?

Dieses Mal werde ich Ihnen zeigen, welche neuen Funktionen vue-cli 3.0.x nach dem Upgrade auf webpack4 hat. Was sind die Vorsichtsmaßnahmen nach dem Upgrade von vue-cli 3.0.x auf webpack4? Werfen wir einen Blick auf den Fall.

Das Projekt wird kürzlich optimiert. Als ich Zeit hatte, habe ich mir die Verwendung von vue-cli3.0.x angesehen. Es fühlt sich ziemlich gut an. Weil das vorherige Projekt vue-cli 2 verwendet hat Erstellt, wenn wir gezwungen werden, eslint zu verwenden, fühlen wir uns bei einigen „Builds“ und „Configs“, die nichts mit dem Projekt zu tun haben, unwohl. . Da es viele Unternehmensumgebungen gibt, ist die Konfiguration der Testumgebung erforderlich. „tt“: „node build/tt-build.js“ hinzugefügt. bis 3.0.x Wie soll es verwendet werden? Es fühlt sich viel besser an, 3.0.x unter Berücksichtigung dieser Probleme zu betrachten.

1. Offizielle Website-Informationen

Überprüfen Sie beim Erlernen von Technologie immer die Informationen auf der offiziellen Website. Weil die Informationen dort am schnellsten aktualisiert werden.
vue-cli
vue-cli-Dokumentation

2. InstallationUmgebung

Hier empfehle ich Ihnen, npm install -g @vue/cli und Yarn global add @vue/cli zu verwenden. Außerdem müssen Sie einige Minuten lang andere Einstellungen vornehmen und einige Dateien löschen generieren.

npm install -g @vue/cli
# or
yarn global add @vue/cli
# 使用vue命令，创建项目(不同于cli2.0的init，create)
vue create my-project

Wenn Sie zur Installation Yarn Global Add @vue/cli verwenden, müssen Sie das Verzeichnis eingeben. Führen Sie

yarn // 安装项目依赖
cd packages/@vue/cli // 目录
yarn link //添加 link `vue` 执行指命 。
vue create my-project // 创建项目 。

aus 3. Multi-Umgebungskonfiguration

Denn das Unternehmen verfügt über eine Entwicklungsumgebung, eine Testumgebung, eine gemeinsame Debugging-Umgebung und eine Online-Umgebung. Reduzieren Sie die manuelle Konfiguration und konfigurieren Sie sie einmal. Daher wurde „package.json“ in 2.0.x hinzugefügt Die Konfiguration vom Typ „tt“: „node build/tt-build.js“ kann nicht viele Dateien konfigurieren. Sie wird in vue-cli 3.0.x unterstützt „.env“-Dateikonfiguration, ich habe hier die Konfigurationen „.env.development“, „.env.produktion“ und „.env.test“ hinzugefügt .

1. Grundlegende Korrespondenz und Standard

  development is used by vue-cli-service serve
  production is used by vue-cli-service build
  test is used by vue-cli-service test

2. Beginnen Sie mit der angegebenen Konfiguration

Um weitere Konfigurationen hinzuzufügen, müssen Sie die Konfiguration unten angeben.

"dev-build": "vue-cli-service build --mode development",

3..env "KonfigurationsdateiSchreiben

Das Inhaltsformat der Konfigurationsdatei lautet wie folgt:

 VUE_APP_*

Beispiel: Der Inhalt von „.env.produktion“ lautet wie folgt:

VUE_APP_MOCK_URL = 'https://xxx.xxx.xxx/restapi/'

4. Passen Sie die Benutzerumgebungskonfiguration an

 console.log(process.env.VUE_APP_MOCK_URL);
process.env.NODE_ENV // 特定
BASE_URL // vue.config.js 配置

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So fordern Sie lokale JSON-Daten in der Vue-Konfiguration an

pandas+dataframe implementiert die Zeilen- und Spaltenauswahl und Slicing-Vorgänge

Selenium+Cookie überspringt die Implementierung des Bestätigungscodes, Schritt-für-Schritt-Erklärung

Das obige ist der detaillierte Inhalt vonWas sind die neuen Funktionen nach dem Upgrade von vue-cli 3.0.x auf webpack4?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!