Quelles sont les nouvelles fonctionnalités après la mise à niveau de vue-cli 3.0.x vers webpack4 ?

Cette fois, je vais vous présenter les nouvelles fonctionnalités de vue-cli 3.0.x après la mise à niveau vers webpack4. Quelles sont les précautions après la mise à niveau de vue-cli 3.0.x vers webpack4. Jetons un coup d'œil au cas.

Le projet a été optimisé récemment. J'ai jeté un œil à l'utilisation de vue-cli3.0.x quand j'en avais le temps. Ça fait du bien. Parce que le projet précédent utilisait vue-cli 2 Créé, nous obliger à utiliser eslint nous met mal à l'aise. Certains "build" et "config" qui n'ont rien à voir avec le projet mettent les gens mal à l'aise. . Puisqu’il existe de nombreux environnements d’entreprise, la configuration de l’environnement de test est requise. Ajout de ""tt": "node build/tt-build.js"". vers 3.0.x Comment doit-il être utilisé ? Il est préférable d'examiner la version 3.0.x en gardant ces problèmes à l'esprit.

1. Informations sur le site officiel

Lorsque vous apprenez la technologie, vérifiez toujours les informations sur le site officiel. Parce que les informations y sont mises à jour le plus rapidement.
vue-cli
documentation vue-cli

2. InstallationEnvironnement

Ici, je vous recommande d'utiliser npm install -g @vue/cli et Yarn global add @vue/cli. Vous devez également définir d'autres paramètres et générer certains fichiers supprimer pendant quelques minutes.

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

Si vous utilisez Yarn Global Add @vue/cli pour installer, vous devez entrer dans le répertoire. Exécuter

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

3. Configuration multi-environnements

Parce que l'entreprise dispose d'un environnement de développement, d'un environnement de test, d'un environnement de débogage commun et d'un environnement en ligne. Réduisez la configuration manuelle et configurez-la une fois. Donc "package.json" a été ajouté dans la version 2.0.x "tt": la configuration de type "node build/tt-build.js"" ne peut pas configurer de nombreux fichiers. Elle est prise en charge dans vue-cli 3.0.x Configuration du fichier ".env", j'ai ajouté la configuration ".env.development", ".env.production" et ".env.test" ici .

1. Correspondance de base et défaut

  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. Commencez avec la configuration spécifiée

Pour ajouter d'autres configurations, vous devez spécifier la configuration ci-dessous.

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

3.".env "Fichier de configurationÉcrire

Le format du contenu du fichier de configuration est le suivant,

 VUE_APP_*

Par exemple : le contenu de ".env.production" est le suivant

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

4. Ajustez la configuration de l'environnement utilisateur

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Comment demander des données json locales dans la configuration de vue

pandas+dataframe implémente la sélection de lignes et de colonnes et opérations de découpage

Selenium+cookie ignore la mise en œuvre du code de vérification, explication étape par étape

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!