vue をパッケージ化した後にロジックが変更された場合の対処方法

Vue.js は、Web アプリケーションを構築する際にコードをより効率的に記述するのに役立つ人気のあるフロントエンド フレームワークです。 Vue.js は保守性と拡張性に優れています。しかし、本番環境では Vue.js をパッケージ化した後にロジック変更が発生するため、非常に手間がかかります。この記事では、この問題について詳しく説明し、いくつかの解決策を提供します。

Vue.js をパッケージ化した後にロジックが変わるのはなぜですか?

開発フェーズでは、Vue.js のアプリケーション コードを簡単に作成できます。ただし、運用環境では、コードをパッケージ化してクライアントに送信する必要があります。このプロセスを通じて、Vue.js コードが圧縮および難読化されて、ファイル サイズが削減され、パフォーマンスとセキュリティが向上します。

ただし、パッケージ化プロセス中にいくつかの問題が発生する可能性があります。一部の Vue.js コンポーネントとプラグインには、パッケージ化後に論理的な変更が加えられます。これは、パッケージ化する際に、コンパイラが Vue.js のコンポーネント ファイルとプラグイン ファイルを 1 つのファイルにマージし、最適化するためです。これにより、動的ルーティング、動的コンポーネント、イベント、カスタム ディレクティブなどの Vue.js の一部の機能が正しく動作しなくなる可能性があります。

Vue.js パッケージ化後の論理的な変更を解決するにはどうすればよいですか?

1. 識別子を使用してコンポーネント名の変更の問題を解決する

パッケージ化後、コンポーネント名が変更されるため、モジュールは相互に参照できなくなります。 webpack のオプション。webpack で .config.js または vue.config.js に構成を追加します:

module.exports = {
  resolve: {
    alias: {
      "vue$": "vue/dist/vue.esm.js"
    }
  }
}

これは標準的なソリューションです。コンポーネントの $options.name をコンポーネントのファイル名に設定します。コンポーネント名の変更を解決する質問です。

2. webpack の ProvidePlugin を使用して必要なモジュールをグローバル化する

いくつかのモジュールをグローバルに呼び出す必要がある場合があります。このとき、webpack の ProvidePlugin を使用してモジュールをグローバル化する必要があります。任意のモジュールで直接使用できます。 webpack.config.js に次の設定を追加します:

const webpack = require("webpack")

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
  ]
}

3. 設定に vue.config.js を使用します

vue.config.js に次の設定を追加します:

module.exports = {
    runtimeCompiler: true,
    configureWebpack: {    
        resolve: {
            alias: {
                '@components': resolve('src/components'),
                '@views': resolve('src/views'),
            }
        },
        externals:{
            'vue': 'Vue',
            'element-ui': 'ELEMENT',
            'vue-router': 'VueRouter',
            'axios': 'axios',
            'vuex': 'Vuex'
        },
    }
}

これは典型的な Vue.js 構成ファイルであり、resolve.alias を構成することでファイル パスの問題を解決します。

4. コンポーネントの繰り返しコンパイルを防止する

Vue.js では、コンポーネントが複数の親コンポーネントによって参照される場合、各親コンポーネントは個別のインスタンスを作成し、コンポーネントを個別にコンパイルします。これにより、同じコンポーネントが繰り返しコンパイルされることになり、長時間実行するとパフォーマンスに影響が出ます。 vue-loader のcacheDirectory オプションを使用すると、コンポーネントがキャッシュされ、複数のコンパイルが回避され、パフォーマンスが向上します。

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('cache-loader')
      .loader('cache-loader')
      .options({
        cacheDirectory: path.resolve(__dirname, 'node_modules/.cache/vue-loader'),
      })
  }
}

概要

Vue.js の開発プロセスでは、運用環境での論理変更の処理の問題に注意を払う必要があります。 Webpack 設定を通じて、ほとんどの問題を解決できます。ただし、開発プロセス中は、不要なトラブルを避けるために、できる限り最新バージョンの Vue.js を使用し、パッケージ化する前にコードを慎重にテストする必要があります。

以上がvue をパッケージ化した後にロジックが変更された場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。