Vue サーバーに js 構成ファイルをインポートする方法

背景

プロジェクトにはローカル構成ファイルがあります:

// src/image-position.js
エクスポートデフォルト{
    ラベル: 'ホームページ',
    値: 'home'、
    データ： [
      {
        ラベル: 「カルーセル」、
        値: 'カルーセル'
      }
    ]
}

ローカルファイルを参照する方法は誰でも知っています。

'./image-position.js' から ImagePosition をインポートします。

次に、image-position.js ファイルをサーバーにドロップし、そのリンクを取得する必要があります。

xxx.com/static/imag…

現時点では、当然ながら、ファイルアドレスを直接引用することは不可能です。

'https://xxx.com/static/image-position.js' から ImagePosition をインポートします。

// エラー この依存関係は見つかりませんでした

成し遂げる

まず、image-position.jsに小さな変更を加えて、グローバルオブジェクトImagePositionを公開します。

// 変更された image-position.js

(関数 (グローバル、ファクトリー) {
  typeof エクスポート === 'オブジェクト' && typeof モジュール !== '未定義' 
    ? module.exports = ファクトリー() 
    : typeof define === 'function' && define.amd 
    ? 定義(ファクトリー) 
    : (global = global || self、global.ImagePosition = factory());
}(これ、(関数() {
  '厳密な使用';
  
  戻る {
    ラベル: 'ホームページ',
    値: 'home'、
    データ： [
      {
        ラベル: 「カルーセル」、
        値: 'カルーセル'
      }
    ]
  };
})));

vue.config.js ファイルに外部を追加します。

モジュール.エクスポート = {
  Webpack の設定: config => {
    config.externals = {
      '画像の位置': '画像の位置'
   }
  }
}

index.html は環境を区別し、js ファイルをインポートします。

// 公開/index.html
<!DOCTYPE html>
<html>
  <ヘッド>
    <メタ文字セット="utf-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1">
    <meta name="レンダラー" content="webkit">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1、最大スケール=1、ユーザースケーラブル=いいえ">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <本文>
    <div id="アプリ"></div>
    <!-- ビルドされたファイルは自動的に挿入されます -->
    <% if (NODE_ENV == 'production') { %>
      <script src="http://xxx.com/static/image-position.js"></script>
    <% } それ以外の場合は { %>
      <script src="http://test.xxx.com/static/image-position.js"></script>
    <% } %>
  </本文>
</html>

上記の手順を完了すると、image-position.js ファイルを問題なく参照できるようになります。

'image-position' から ImagePosition をインポートします
console.log(画像の位置)
// {ラベル: 'ホーム'、値: 'ホーム'、データ: [{ラベル: 'カルーセル'、値: 'カルーセル'}]}

vue-cli2.0での設定方法の補足

// ビルド/webpack.base.conf.js
モジュール.エクスポート = {
  外部: {
    // 'image-position' を追加: 'ImagePosition'
  }
}

// インデックス.html
<!DOCTYPE html>
<html>
  <ヘッド>
    <メタ文字セット="utf-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1">
    <meta name="レンダラー" content="webkit">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1、最大スケール=1、ユーザースケーラブル=いいえ">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <本文>
    <div id="アプリ"></div>
    <!-- ビルドされたファイルは自動的に挿入されます -->
    <% if (process.env == 'production') { %>
      <script src="http://xxx.com/static/image-position.js"></script>
    <% } それ以外の場合は { %>
      <script src="http://test.xxx.com/static/image-position.js"></script>
    <% } %>
  </本文>
</html>

要約する

Vue プロジェクトのパッケージ化ボリュームの最適化では、CDN アクセラレーションがよく使用される方法です。上記は、実際に CDN アクセラレーションの実装内容です。サードパーティのライブラリは、script タグを通じて導入され、パッケージ化された vendor.js ファイルのサイズが大幅に削減されます。

ローカルファイルをリモートでサーバー上に配置したい場合、鍵となるのは実装プロセスの最初のステップです。残りの内容は、CDN アクセラレーションを構成するプロセスと同じです。

上記は、Vue がサーバー上の js 構成ファイルをインポートする方法の詳細です。Vue の js 構成ファイルのインポートの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません: