vue-cli の構成と使用方法の概要 (新規)

1 vue-cliとは

vue脚手架指的是vue-cli、これは単一ページアプリケーション用に特別に構築された複雑な足場であり、新しいアプリケーションを簡単に作成でき、vue および webpack 用のプロジェクトテンプレートを自動的に生成するために使用できます。

2 なぜ複数の`vue.config.js`構成があるのですか?

2.0 や 3.0 などの異なるフレームワークでは、構成方法が異なることがわかっています。これについては、次の記事で説明します。

設定アドレス: https://cli.vuejs.org/zh/config/

3 vue.config.js ベース ue.config.js

スタイルワン

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

スタイル 2

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

4 特定の構成要素

4-1 baseUrl

Vue CLI 3.3 以降非推奨。 publicPath を使用

4-2 パブリックパス

パッケージが具体的にサービスにデプロイされる場所を示す、デプロイされたアプリケーションパッケージのベース URL。

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

4-3 出力ディレクトリ

生成されたプロダクションビルドファイルのディレクトリ

4-4 アセットディレクトリ

静的リソース (js、css、img、fonts) のディレクトリを配置する

4-5 インデックスパス

生成された index.html の出力パス

4-6 ファイル名ハッシュ

ファイル名ハッシュ暗号化

4～7ページ

マルチページモードでのアプリケーションのビルド

マルチページモード (MPA マルチページアプリケーション)
シングルページモード (SPA シングルページアプリケーション)

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

開発環境で保存するたびにコード検出をeslint-loader通過し、インストール
後@vue/cli-plugin-eslintにかどうか

trueまたはに設定するとwarning、eslint-loader は lint エラーをコンパイル警告として出力します;
デフォルトでは、警告はコマンドラインにのみ出力され、コンパイルは失敗しません

を使用lintOnSave: 'default'すると、eslint-loader が強制的に lint エラーをコンパイルエラーとして出力します。

module.exports = {
    
    
  lintOnSave: 'default'
}

本番環境でのみ有効

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

4-9 ランタイムコンパイラ

ランタイムコンパイラを含む Vue ビルドを使用するかどうか

特定の命令ジャンプ: runtimecompiler と runtimeonly とは

4-10 トランスパイル依存関係

すべてのサードパーティの依存関係を転送する

babel-loaderデフォルトでは、すべてのnode_modulesファイルが無視されますが、transpileDependencies開始するように設定できます。

4-11 productionSourceMap

Source Map位置情報を格納する情報ファイルです。

つまりSource Map、コードの圧縮と難読化の前後の対応がファイルに格納されます。これにより、エラーが発生した場合、デバッグツールは変換されたコードの代わりに元のコードを直接表示するため、後のデバッグが大幅に容易になります。

4-12 クロスオリジン

生成された HTML でタグとタグの crossorigin 属性を<script>設定します。<link rel="stylesheet">

このオプションは、ビルド時に html-webpack-plugin によって挿入されたタグにのみ影響することに注意してください。テンプレート (public/index.html) に直接記述されたタグは影響を受けません。

4-13 完全性

生成された HTML のタグ<link rel="stylesheet">と<script>サブリソース整合性 (SRI) を有効にします。このオプションを有効にすると、ビルドされたファイルが CDN にデプロイされている場合にセキュリティが強化されます。

また、SRI が有効になっている場合、Chrome のバグによりファイルが 2 回ダウンロードされるため、プリロードリソースヒントが無効になります。

4-14 configureWebpack

シンプルな構成

// 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チェーンWebpack

webpack-chain ベースの ChainableConfig インスタンスを受け取る関数です。内部の webpack 構成をより細かく変更できます。

4-16 css.modules

css モジュールを介して、指定された css セレクターを共通の構成で目的の形式に構成できます。

ここに画像の説明を挿入
固定文字列 -[ファイル名]-[元のセレクター名]-[長さ 5 のハッシュ]。

個人的な理解: 部分モジュールを使用しない場合は、css 名前空間を追加します

4-17 css.requireModuleExtension

参考：https ://segmentfault.com/a/1190000040682273?sort=newest

簡単に言うと、css モジュールは Vue のスコープに非常に似ており、スタイルのグローバル化に対処するために使用されます。

4-18 css.extract

css.extractvue コンポーネント内で css の分離を強制するかどうかを制御するために使用されます。

https://blog.csdn.net/weixin_44869002/article/details/105831757を参照

4-19 css.sourceMap

css の sourceMap を有効にするかどうか

4-20 css.loader オプション

CSSローダー

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

4-21 開発サーバー

構成コード

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

フロントエンドアプリケーションとバックエンド API サーバーが同じホストで実行されていない場合、開発環境で API サーバーに API 要求をプロキシする必要があります。この問題は、vue.config.js の devServer.proxy オプションで構成できます。

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

4-23 パラレル

Babel と TypeScript にスレッドローダーを使用するかどうか

4-24豆

プログレッシブ Web アプリ (略して PWA) は、Web アプリのエクスペリエンスを向上させる新しい方法であり、ユーザーにネイティブアプリケーションのエクスペリエンスを提供できます。

4-25 プラグインオプション

サードパーティのプラグインオプションを渡すために使用されます

5 バベル

Babel は、babel.config.js を介して構成できます。

6 ESLint

.eslintrc または package.json の eslintConfig フィールドを介して構成できます

7 タイプスクリプト

tsconfig.json で構成可能