Résumé de la configuration et de l'utilisation de vue-cli (nouveau)

1 Qu'est-ce que vue-cli

vue脚手架指的是vue-cli, c'est un échafaudage complexe spécialement conçu pour les applications d'une seule page, il peut facilement créer de nouvelles applications et peut être utilisé pour générer automatiquement des modèles de projet pour vue et webpack

2 Pourquoi y a-t-il plusieurs vue.config.jsconfigurations ?

Nous savons que pour différents frameworks, tels que 2.0 et 3.0, ils ont des méthodes de configuration différentes, qui seront expliquées dans le prochain article.

Adresse de configuration : https://cli.vuejs.org/zh/config/

3 vue.config.js base ue.config.js

style un

module.exports = {
    
    
  // 选项...
}

style deux

const {
    
     defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    
    
  // 选项
})

4 Éléments de configuration spécifiques

4-1 baseUrl

Obsolète depuis Vue CLI 3.3, utilisez publicPath

4-2 publicPath

L'URL de base du package d'application déployé, indiquant où le package est spécifiquement déployé sur le service.

module.exports = {
    
    
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

4-3 outputDir

Le répertoire des fichiers de build de production générés

4-4 actifsDir

Placer le répertoire des ressources statiques (js, css, img, fonts)

4-5 indexPath

Le chemin de sortie du fichier index.html généré

4-6 filenameHashing

Chiffrement par hachage de nom de fichier

4-7pages

Création d'applications en mode multi-pages

Mode multipage (Application multipage MPA)
Mode page unique (Application SPA monopage)

module.exports = {
    
    
  pages: {
    
    
    index: {
    
    
      entry: 'src/index/main.js',    // page 的入口
      template: 'public/index.html', // 模板来源
      filename: 'index.html',        // 在 dist/index.html 的输出
      title: 'Index Page',           // 标签需要<title><%= htmlWebpackPlugin.options.title %></title>
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    subpage: 'src/subpage/main.js'   // 输出文件名会被推导为 `subpage.html`。
  }
}

4-8 lintOnSave

Indique s'il faut eslint-loadertransmettre la détection de code
à chaque sauvegarde dans l'environnement de développement et prendre effet après @vue/cli-plugin-eslintl' installation

Lorsqu'il est défini sur trueou warning, eslint-loader affichera les erreurs de peluche sous forme d'avertissements de compilation ; par
défaut, les avertissements ne seront émis que sur la ligne de commande et n'échoueront pas la compilation

L' lintOnSave: 'default'utilisation forcera eslint-loader à afficher les erreurs de peluche en tant qu'erreurs de compilation

module.exports = {
    
    
  lintOnSave: 'default'
}

Uniquement activé dans l'environnement de production

module.exports = {
    
    
  lintOnSave: process.env.NODE_ENV !== 'production'
}

4-9 runtimeCompiler

S'il faut utiliser une version de Vue qui inclut le compilateur d'exécution

Saut d'instructions spécifiques : qu'est-ce que runtimecompiler et runtimeonly ?

4-10 transpileDépendances

Transférer toutes les dépendances tierces

Par babel-loaderdéfaut , tous les node_modulesfichiers dans seront ignorés, mais transpileDependenciespeuvent être configurés pour démarrer.

4-11 productionSourceCarte

Source MapIl s'agit d'un fichier d'informations qui stocke les informations de localisation.

C'est-à-dire que Source Mapla correspondance entre avant et après la compression et l'obscurcissement du code est stockée dans le fichier. Avec lui, lorsqu'une erreur se produit, l'outil de débogage affichera directement le code d'origine au lieu du code converti, ce qui peut grandement faciliter le débogage ultérieur.

4-12 origine croisée

<script>Définissez <link rel="stylesheet">l'attribut crossorigin des balises et dans le code HTML généré.

Notez que cette option n'affecte que les balises injectées par le plugin html-webpack au moment de la construction - les balises écrites directement dans le modèle (public/index.html) ne sont pas affectées.

4-13 intégrité

Activez l'intégrité des sous-ressources (SRI) sur les balises <link rel="stylesheet">et . <script>L'activation de cette option peut fournir une sécurité supplémentaire si vos fichiers construits sont déployés sur un CDN.

Notez que cette option n'affecte que les balises injectées par le plugin html-webpack au moment de la construction - les balises écrites directement dans le modèle (public/index.html) ne sont pas affectées.

De plus, lorsque SRI est activé, les indications de ressources de préchargement sont désactivées en raison d'un bogue dans Chrome qui entraîne le téléchargement de fichiers deux fois.

4-14 configurer Webpack

Configuration simplifiée

// vue.config.js
module.exports = {
    
    
  configureWebpack: {
    
    
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

// vue.config.js
module.exports = {
    
    
  configureWebpack: config => {
    
    
    if (process.env.NODE_ENV === 'production') {
    
    
      // 为生产环境修改配置...
    } else {
    
    
      // 为开发环境修改配置...
    }
  }
}

4-15 chaînesWebpack

est une fonction qui recevra une instance ChainableConfig basée sur une chaîne webpack. Permet des modifications plus fines de la configuration interne du webpack.

4-16 modules CSS

Grâce au module css, le sélecteur css spécifié peut être configuré dans le format souhaité via une configuration commune

Chaîne fixe -[nom du fichier]-[nom du sélecteur d'origine]-[hachage de longueur 5].

Compréhension personnelle : lorsque vous n'utilisez pas de modules partiels, ajoutez un espace de noms css

4-17 css.requireModuleExtension

Référence : https://segmentfault.com/a/1190000040682273?sort=newest

Pour le dire simplement, les modules css sont très similaires à ceux de Vue et sont utilisés pour faire face à la globalisation des styles.

4-18 css.extrait

css.extractUtilisé pour contrôler s'il faut forcer la séparation des css à l'intérieur des composants de la vue.

Reportez-vous à https://blog.csdn.net/weixin_44869002/article/details/105831757

4-19 css.sourceMap

S'il faut activer sourceMap pour css

4-20 css.loaderOptions

chargeur css

module.exports={
    
    
  css:{
    
    
    loaderOptions:{
    
    
		css:{
    
    
			// css-loader
		},
		postcss:{
    
    
 			// postcss-loader 
 		}	
 	}
  }
}

4-21 devServer

code de configuration

devServer:{
    
    
      //运行代码的目录
      contentBase:resolve(__dirname,"build"),
      //监视contentBase下的全部文件，一旦文件变化，就会reload
      watchContentBase:true,
      //监视中忽略某些文件
      watchOptions:{
    
    
          ignored:/node_modules/
      },
      //端口号
      port:3000,
      //域名
      host:'localhost',
      //启动gzip压缩
      compress:true,
      //自动打开浏览器
      open:true,
      //开启HMR功能
      hot:true,
      //不要启动服务的日志信息
      clientLogLevel:'none',
      //除了一些基本的启动信息以外，其他都不显示
      quiet:true,
      //如果出错了，不要全屏提示
      overlay:false,
      //服务器代理 -> 解决开发环境跨域问题
      proxy:{
    
    
        //一旦devServer5000接到/api/xxx的请求，就会把请求转发到另一个服务器3000
        '/api':{
    
    
           //转发后的目标地址
           target:'localhost:3000',
           // 发送请求时，请求路径重写 /api/xxx ->  /xxx （去掉a/pi）
           pathRewrite: {
    
    
              '^/api': ''
           }
        }
    }
}

4-22 devServer.proxy

Si votre application frontale et votre serveur d'API principal ne s'exécutent pas sur le même hôte, vous devez transmettre par proxy les demandes d'API au serveur d'API dans l'environnement de développement. Ce problème peut être configuré via l'option devServer.proxy dans vue.config.js

module.exports = {
    
    
  devServer: {
    
    
    proxy: 'http://localhost:4000'
  }
}

4-23 parallèles

S'il faut utiliser le chargeur de threads pour Babel et TypeScript

4-24 haricots

L'application Web progressive, ou PWA en abrégé, est une nouvelle façon d'améliorer l'expérience de l'application Web, qui peut donner aux utilisateurs l'expérience d'une application native.

4-25 pluginOptions

Utilisé pour transmettre toutes les options de plug-in tiers

5 Babel

Babel peut être configuré via babel.config.js.

6 ESLint

Peut être configuré via le champ eslintConfig dans .eslintrc ou package.json

7 Tapuscrit

Peut être configuré via tsconfig.json