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

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 の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue-cli3にvue.config.jsフォルダがなく、vueプロジェクトのドメイン名を設定する問題を解決します
  • vue.config.js を設定して静的フォルダ内の静的ファイルを処理する方法
  • Vue の Eslint 設定ファイル eslintrc.js の説明とルールの紹介
  • vue-cliのビルドフォルダにモックデータを設定するためのdev-server.jsファイルがありません
  • vue-cli スキャフォールディング ビルド ディレクトリ内の utils.js ツール構成ファイルの詳細な説明
  • vue-cli スキャフォールディング設定ディレクトリ内の index.js 設定ファイルのメソッド
  • vue-cli スキャフォールディング ビルド ディレクトリ内の dev-server.js 構成ファイルの詳細な説明
  • vue-cli の ESlint 設定ファイル eslintrc.js の詳細な説明

<<:  Linux で指定されたフォルダの各サブフォルダ内のファイル数を表示する

>>:  Dockerイメージをプライベートリポジトリにアップロードする方法の例

推薦する

MySQL のマスター スレーブ レプリケーション オプションをオンラインで変更する方法

序文: MySQL で最も一般的に使用されるアーキテクチャは、マスター スレーブ レプリケーションで...

js の関数の長さはどれくらいですか?

目次序文なぜいくらですか?パラメータの数デフォルトパラメータ残りのパラメータ要約する序文今日は関数の...

Vue-Routerのルート設定の詳しい説明

目次導入ルート内のオブジェクト属性パス: 文字列コンポーネント: コンポーネント | () =>...

Linuxターミナルでの一般的なMySQL操作コマンドの詳細な説明

仕える: # chkconfig --list すべてのシステム サービスを一覧表示します # ch...

mysql5.7 のエンコーディングを utf8mb4 に設定する方法

最近、問題に遭遇しました。モバイル端末の絵文字や一部の絵文字は 4 バイトですが、UTF-8 は 3...

MySQL 外部キー制約の無効化と有効化コマンド

MySQL 外部キー制約の無効化と有効化: MySQL 外部キー制約が有効になっているかどうかは、グ...

CN2、GIA、CIA、BGP、IPLC はどういう意味ですか?

CN2ラインとは何ですか? CN2 は、China Telecom Next Carrier Ne...

CSS レイアウト チュートリアル: 垂直方向の中央揃えを実現する方法

序文最近、フロントエンドの知識をまとめており、いくつかのインタビューにも参加しました。インタビュー中...

ホームページのデザインはウェブデザイナーのレベルを最もよく反映する

私がこれまで携わってきた多くのプロジェクトでは、基本的に避けられない悪循環がありました。それは、ホー...

Vueは動的ルーティングの詳細を実装します

目次1. フロントエンド制御1. router.js ファイル内 (router.js にそれぞれ静...

Vue ログインページでクッキーを使用してパスワードを 7 日間記憶する方法

問題の説明プロジェクトのログインページでは、7日間パスワードを記憶する必要がある機能があります。この...

Linux で特定のユーザーにフォルダーのすべてのコンテンツを許可するにはどうすればよいですか?

【問題分析】 chown コマンドを使用できます。ここで ch は change (変更) を表し...

ルート権限なしでログインするためのDockerソリューション

docker コマンドを初めて使用する場合、権限の問題を確認するメッセージが表示されます。 unix...

MySQL 8.0.11 のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0のインストールと設定方法は参考までに。具体的な内容は以下のとおりです。ダウンロード...

WebページのレイアウトではIE6の互換性の問題を考慮する必要があります

下の図は、当社のウェブサイト統計システムの訪問者詳細におけるブラウザ閲覧率を示しており、IE6 が ...