背景プロジェクトにはローカル構成ファイルがあります: // 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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Linux で指定されたフォルダの各サブフォルダ内のファイル数を表示する
>>: Dockerイメージをプライベートリポジトリにアップロードする方法の例
序文: MySQL で最も一般的に使用されるアーキテクチャは、マスター スレーブ レプリケーションで...
目次序文なぜいくらですか?パラメータの数デフォルトパラメータ残りのパラメータ要約する序文今日は関数の...
目次導入ルート内のオブジェクト属性パス: 文字列コンポーネント: コンポーネント | () =>...
仕える: # chkconfig --list すべてのシステム サービスを一覧表示します # ch...
最近、問題に遭遇しました。モバイル端末の絵文字や一部の絵文字は 4 バイトですが、UTF-8 は 3...
MySQL 外部キー制約の無効化と有効化: MySQL 外部キー制約が有効になっているかどうかは、グ...
CN2ラインとは何ですか? CN2 は、China Telecom Next Carrier Ne...
序文最近、フロントエンドの知識をまとめており、いくつかのインタビューにも参加しました。インタビュー中...
私がこれまで携わってきた多くのプロジェクトでは、基本的に避けられない悪循環がありました。それは、ホー...
目次1. フロントエンド制御1. router.js ファイル内 (router.js にそれぞれ静...
問題の説明プロジェクトのログインページでは、7日間パスワードを記憶する必要がある機能があります。この...
【問題分析】 chown コマンドを使用できます。ここで ch は change (変更) を表し...
docker コマンドを初めて使用する場合、権限の問題を確認するメッセージが表示されます。 unix...
MySQL 8.0のインストールと設定方法は参考までに。具体的な内容は以下のとおりです。ダウンロード...
下の図は、当社のウェブサイト統計システムの訪問者詳細におけるブラウザ閲覧率を示しており、IE6 が ...