vue-cli 設定ファイル (詳細なチュートリアル)

この記事では主に vue-cli の webpack の設定方法を紹介します。この記事は主に vue の config フォルダー内の関連コードと config のファイル構造を分析します。興味のある方はこの記事を参照してください。

最近私は webpack を勉強しています。突然、vue-cli で webpack がどのように設定されているかを知りたくなり、関連記事をたくさん読んだので、vue-cli の設定についてもいくつか思いつきました。ことわざにあるように、「仕事をうまくやりたければ、まず道具を研ぎ澄まさなければなりません」！この記事では主に vue の config フォルダー内の関連コードを分析します

まず、config のファイル構造を見てみましょう:

|-config
|---dev.env.js
|---index.js
|---prod.env.js

vue プロジェクト フォルダーを開くと、フォルダー ファイルの下に 3 つのファイルがはっきりと表示されます。 「dev.env.js」、「index.js」、「prod.env.js」、まず prod.env.js ファイルを開いて内容を確認します。

'use strict'
module.exports = {
 NODE_ENV: '"production"'
}

prod.env.js 内容は非常に優れています。これは、実行環境が「production (本番環境)」であることを示すオブジェクトをエクスポートするだけです。次に、対応する「dev.env.js」ファイルを見てみましょう。 webpack-merge モジュールが最初に導入されました。このモジュールの機能は、2 つの設定ファイル オブジェクトをマージし、新しい設定ファイルを生成することです。これは、es6 の object.assign() に似ています。

vue-cli は、いくつかの共通の設定を抽出して 1 つのファイルに置き、異なるコードを設定します。ドキュメントにあるように、「webpack は非反復 (繰り返さない - DRY) の原則に従っており、同じものを設定します。」 "

さて、コードに戻りましょう。webpack-merge を導入した後、このファイルは prod.env.js も導入し、prod.env.js の構成を新しい構成と結合します。つまり、開発環境 (開発) がマージされることを指定します。 (なぜこれが行われるのかよくわかりません。マージせずに直接 module.exports を書いても問題ありません。正常なダウングレードのためでしょうか?)

もう 1 つの注意点は、開発と運用を二重引用符で囲む必要があることです。それ以外の場合は、二重引用符で囲む必要があります。エラーが報告されます! ！ ！ ={NODE_ENV:'"development'}

最後に、index.js を見てみましょう:

'use strict'
//引入webpack-merge模块
const merge = require('webpack-merge')
//引入刚才打开的prod.env.js
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

ノード内のパス モジュールが最初に紹介されています。

それから、まず dev の下の設定内容を見てみましょう:

assetsSubDirectory は、静的リソース フォルダー (デフォルト) を参照します。は「static」、

assetsPublicPathはリリースパスを指し、

proxyTableはプロキシAPIを設定することが多い場所です。背後のホストとポートは誰もが知っていると思うので、詳細には触れません。ブラウザを開きます

errorOverlayクエリエラー

notifyOnErrors通知エラー

、ポーリングは開発サーバーに関連する設定です。webpackが提供する開発サーバーはファイルの変更を監視できますが、場合によってはポーリングを設定できません。 poll ) を解決する

useEslint eslint を使用するかどうか

showEslintErrorsInOverlay eslint エラー プロンプトを表示するかどうか

devtool webpack には 4 つのモードがあり、詳細については webpack のドキュメントを確認できます

cacheBusting が連携します。 devtool の設定で、ファイル名に新しいハッシュを挿入してキャッシュをクリアするときに、ソース マップを生成するかどうか、開発環境ではデフォルトが true ですが、ドキュメントには次の文もあります。「これをオフにすると、ソース マップのデバッグ中。」 。 。

cssSourceMap cssSourceMap を有効にするかどうか

ビルド時の構成内容を見てみましょう:

index コンパイル後の Index.html へのパス。

path.resolve(__dirname) が path.resolve(__dirname, ' で参照します)。 ./dist') これは、index.js が配置されている絶対パスであり、パス「../dist」(ノード関連の知識)、

assetsRoot がパッケージ化された後のファイル ルート パス (assetsSubDirectory の場合) を探します。とassetsPublicPathはdevと同じ、

productionSourceMap ソースマップを有効にするかどうか、

devtoolはdevと同じ、

productionGzip 圧縮するかどうか、

productionGzipExtensions gzipで圧縮する必要があるファイルの拡張子設定後、対応する拡張子のファイルが圧縮されます

bundleAnalyzerReport パッケージングを有効にするかどうか 分析レポート

名前の通り、config フォルダーの中身は基本的には完成です。これまでのところ、ハードコーディングされた設定ファイルはあまり多くありません

以上をまとめました。将来的には誰にとっても役立つことを願っています。

関連記事:

VUE2は二次的な州と都市の連携選択を実装

reactを使用してページングコンポーネントを実装する

ReactとVueプロジェクトでSVGを使用する方法

同日の時間を比較JavaScript 経由 サイズ

以上がvue-cli 設定ファイル (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。