さまざまなビルドターゲット（開発、生産）を使用するようにVue CLIを構成するにはどうすればよいですか？-Vue.js-php.cn

さまざまなビルドターゲット（開発、生産）を使用するようにVue CLIを構成するにはどうすればよいですか？

Vue CLIを構成するには、開発と生産にさまざまなビルドターゲットを使用するには、 vue.config.jsファイルを変更する必要があります。このファイルを使用すると、ビルドターゲットに応じて適用できるさまざまな構成を指定できます。これがあなたがそれをセットアップする方法です：

vue.config.js作成または変更：プロジェクトのルートディレクトリにvue.config.jsファイルがない場合は、作成します。すでに持っている場合は、必ず次の構成を追加してください。
環境固有の構成の定義： process.env.NODE_ENV変数を使用して、開発環境と生産環境を区別します。以下は、あなたのvue.config.jsファイルがどのように見えるかの基本的な例です。

 <code class="javascript">module.exports = { // Configuration that applies to both environments publicPath: process.env.NODE_ENV === 'production' ? '/production-subdirectory/' : '/', // Other configurations... // ChainWebpack is used to modify the internal webpack configuration chainWebpack: config => { if (process.env.NODE_ENV === 'production') { // Production-specific webpack configurations config.optimization.minimize(true); // Other production-specific optimizations... } else { // Development-specific webpack configurations config.devtool('cheap-module-eval-source-map'); // Other development-specific settings... } } };</code>

ログイン後にコピー

この例では、 publicPathは環境に基づいて異なる方法で設定されており、 chainWebpackメソッドは、開発と生産に異なるWebパック設定を適用するために使用されます。

ビルドコマンドの実行：アプリケーションを実行する場合は、次のコマンドを使用します。
- 開発用： <code>vue-cli-service serve</code>
- 生産用： <code>vue-cli-service build</code>

この方法でvue.config.jsファイルを設定することにより、開発と生産のビルドに合わせたさまざまな構成を簡単に切り替えることができます。

Vue CLIの開発環境と生産環境を切り替えるにはどうすればよいですか？

Vue CLIの開発環境と生産環境の切り替えは、主に使用するコマンドと設定された環境変数によって処理されます。

コマンドの使用：
- 開発モードでアプリケーションを開始するには、コマンドを使用します。
```
 <code>npm run serve</code>
```
  ログイン後にコピー
  ログイン後にコピー
  または
```
<code>vue-cli-service serve</code>
```
  ログイン後にコピー
  ログイン後にコピー
- 生産のためのアプリケーションを構築するには、以下を使用してください。
```
 <code>npm run build</code>
```
  ログイン後にコピー
  または
```
<code>vue-cli-service build</code>
```
  ログイン後にコピー
環境変数の設定：
- Vue Cliはprocess.env.NODE_ENVを使用して環境を決定します。 <code>vue-cli-service serve</code>を実行すると、 process.env.NODE_ENV自動的に'development'に設定されます。 <code>vue-cli-service build</code>を実行すると、 'production'に設定されます。
- コマンドを実行する前に、 NODE_ENV環境変数を手動で設定することもできます。例えば：
```
 <code>NODE_ENV=production vue-cli-service build</code>
```
  ログイン後にコピー
  これにより、ビルドプロセスが生産設定を使用します。

これらのコマンドを使用して、環境変数を調整することにより、Vue CLIの開発環境と生産環境を簡単に切り替えることができます。

生産ビルドを最適化するために、Vue CLIでどのような設定を調整すればよいですか？

Vue CLIで生産ビルドを最適化するには、 vue.config.jsファイル内のいくつかの重要な設定に焦点を当てる必要があります。調整する重要な設定は次のとおりです。

縮小：
- ファイルサイズを縮小するために、コードが模倣されていることを確認してください。デフォルトでは、Vue CliはMinificationにterser-webpack-pluginを使用しています。 vue.config.jsで構成できます。
```
 <code class="javascript">module.exports = { chainWebpack: config => { config.optimization.minimize(true); config.optimization.minimizer('terser').tap(args => { args[0].terserOptions.compress.drop_console = true; return args; }); } };</code>
```
  ログイン後にコピー
  この例では、ファイルサイズをさらに削減するために、生産のconsoleステートメントもドロップします。

コード分割：

コード分割を有効にして、現在のページに必要なJavaScriptのみをロードします。 Vue CLIはこれを自動的に行いますが、 splitChunks設定を調整することでさらに最適化できます。

 <code class="javascript">module.exports = { chainWebpack: config => { config.optimization.splitChunks({ chunks: 'all', minSize: 30000, maxSize: 0, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '~', name: true, cacheGroups: { defaultVendors: { test: /[\\/]node_modules[\\/]/, priority: -10 }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true } } }); } };</code>

ログイン後にコピー

木の揺れ：
- Vue CLIは、未使用のコードを削除するツリーの揺れを自動的に有効にします。生産ビルドで排除できる不要なモジュールやコンポーネントをインポートしていないことを確認してください。

GZIP圧縮：

生産ビルドのGZIP圧縮を有効にして、転送されたファイルのサイズをさらに削減します。これはサーバー設定で構成できますが、 vue.config.jsで設定することもできます。

 <code class="javascript">const CompressionWebpackPlugin = require('compression-webpack-plugin'); module.exports = { configureWebpack: config => { if (process.env.NODE_ENV === 'production') { return { plugins: [new CompressionWebpackPlugin({ test: /\.js$|\.css$/, threshold: 10240, minRatio: 0.8 })] }; } } };</code>

ログイン後にコピー

キャッシュ：
- ファイル名でハッシュを使用して、ブラウザキャッシュを活用します。 Vue Cliはデフォルトでコンテンツハッシュを使用します。これにより、コンテンツが変更されたときにブラウザがキャッシュバージョンを更新できるようになります。

これらの設定を調整することにより、VUE CLIの生産ビルドを大幅に最適化することができ、負荷時間が短くなり、パフォーマンスが向上します。

Vue CLIに開発が蓄積されていることを確認するにはどうすればよいですか？

Vue CLIで開発が構築されるようにするには、デバッグを容易にするためのソースマップを含めるには、 vue.config.jsファイルを構成する必要があります。ソースマップはデフォルトで開発モードで有効になりますが、次のように明示的に設定できます。

vue.config.jsを変更する：プロジェクトのルートにvue.config.jsファイルがあることを確認し、次の構成を追加します。

 <code class="javascript">module.exports = { chainWebpack: config => { if (process.env.NODE_ENV === 'development') { config.devtool('cheap-module-eval-source-map'); } } };</code>

ログイン後にコピー

cheap-module-eval-source-mapオプションは、開発のためのビルド速度とデバッグ機能のバランスをとることができます。ライン間マッピングが含まれていますが、ビルドプロセスを高速化する列マッピングは含まれていません。

開発ビルドを実行する：開発ビルドを使用して：以下を使用してください。
```
 <code>npm run serve</code>
```
ログイン後にコピー
ログイン後にコピー
または
```
<code>vue-cli-service serve</code>
```
ログイン後にコピー
ログイン後にコピー
Vue CLIは、 development構成を自動的に適用し、 vue.config.jsファイルで指定されているソースマップを含めます。