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イメージをプライベートリポジトリにアップロードする方法の例

推薦する

Vue はチャット ボックスで絵文字を送信する機能を実装します

vueチャットボックスで絵文字を送信し、vueインターフェースで絵文字を送信するための具体的なコード...

Linux 環境に nginx をインストールするチュートリアル

目次1. 必要な環境をインストールする //gccをインストールする yum で gcc-c++ を...

TS 数値区切り文字とより厳密なクラス属性チェックの詳細な説明

目次概要演算子の改良と正確なinstanceofよりスマートなオブジェクトリテラル推論固有のシンボル...

CSS3 @mediaの基本的な使い方のまとめ

//文法: @media mediatype and | not | only (メディア機能) ...

MySQL の日付と時刻関数の概要 (MySQL 5.X)

1. MySQLは現在の日付と時刻を取得する関数1.1 現在の日付 + 時刻 (日付 + 時刻) ...

Vue v-for ループを書く 7 つの方法

目次1. v-forループでは常にキーを使用する2. 特定のスコープ内でv-forループを使用する3...

Linux でスワップ領域を確認する 5 つのコマンドの概要

序文Linux では、スワップ パーティションとスワップ ファイルの 2 種類のスワップ領域を作成で...

Webデザインチュートリアル(3):デザインの手順と考え方

<br />前のチュートリアル:Webデザインチュートリアル(2):模倣と盗作について。...

アイデアを使用して Springboot 初期化サーバーを構築する際の問題分析

問題の説明最近、Springbootプロジェクトを構築していたところ、会社のネットワークケーブルに接...

Docker+Jenkins+Gitlab+Djangoアプリケーションデプロイ実践の詳細な説明

1. 背景インターネット アプリケーションの急速な更新と反復という状況では、従来の手作業や単純なスク...

DockerにJava環境をインストールするための実装手順

この記事は Linux centos8 をベースにして、docker をインストールし、イメージをプ...

CSS3は水平方向の中央揃え、垂直方向の中央揃え、水平方向と垂直方向の中央揃えのサンプルコードを実装しています。

フロントエンドの担当者であれば、面接でも仕事中でも、「CSS を使用して中央揃えにする」という効果に...

Web デザイン リファレンス Firefox デフォルト スタイル

W3C は HTML の標準をいくつか確立していますが、ブラウザは独自の定義済みスタイルに従って W...

MySQLは変数を使用してさまざまなソートを実装します

コアコード -- 以下では、MySQLでのソート列の実装を示します -- テストデータ CREATE...

ドキュメントの場所の比較

<br />2 年前に PPK が投稿した素晴らしいブログ記事では、contains()...