Introduction détaillée à vue-cli 3.0.x

Cette fois, je vous apporte une introduction détaillée à vue-cli 3.0.x Quelles sont les précautions lors de l'utilisation de vue-cli 3.0.x Voici des cas pratiques, jetons un coup d'œil.

Le projet est en cours d'optimisation 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 a été créé avec vue-cli 2, nous obliger à utiliser eslint nous a mis mal à l'aise. Certains "build" et "config" qui n'avaient rien à voir avec le projet ont mis 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"". Comment dois-je l'utiliser pour 3.0.x ? 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 du site officiel. Parce que les informations y sont mises à jour le plus rapidement.
vue-cli
documentation vue-cli

2 InstallationEnvironnement

Voici l'en-tête spécial, il est recommandé. que vous utilisez npm install -g @vue/cli, via fil global add @vue/cli, d'autres paramètres doivent être définis et certains fichiers sont générés supprimé 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 fil 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-environnement

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. Par conséquent, le type de configuration "package.json "tt": "node build/tt-build.js"" a été ajouté dans la version 2.0.x et de nombreux fichiers n'ont pas pu être configurés. Dans vue-cli 3.0.x, la configuration du fichier ".env" est prise en charge ici. J'ai ajouté les configurations ".env.development", ".env.production" et ".env.test".

1. Correspondance de base et par 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 par spécifier la configuration

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

 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 ce cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres sujets connexes dans l'article du site Web PHP chinois !

Lecture recommandée :

Comment dédupliquer des données lors de la fusion de plusieurs tableaux

Ce qui est nécessaire pour déterminer le type et la taille des images téléchargées Étapes

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!