古い Vue プロジェクトに Vite サポートを追加する方法

古い Vue プロジェクトに Vite サポートを追加する方法

1. はじめに

会社のプロジェクトを引き継いで2年になります。今では毎回プロジェクトを起動するのに1分近くかかり、HMRは数秒かかります。しかし、Vite2がリリースされてから、光が見えてきましたが、アップグレードしたことはありませんでした。昨日、ついに我慢できなくなり、アップグレード後数秒で完了しました。

vite は、Vue の作者 Yuxi You によって開発された Web 開発ツールです。次の機能があります。

高速コールドスタート

インスタントモジュールホットアップデート

真のオンデマンドコンパイル

2. アップグレードを開始する

注: 開発環境をアップグレードしたばかりで、パッケージングには引き続き webpack を使用しています (パッケージングに vite も使用してみましたが、パッケージング後に iview のフォントアイコンに問題があることがわかりました。事前検証の結果、静的リソースの問題であることがわかりました。vite でパッケージ化された静的リソースは、デフォルトでアセットの下に配置されます。解決策を知っている方がいらっしゃいましたら、解決策を教えてください)

2.1 vuecliプラグインviteをインストールする

vue add vit # viteプラグインを追加する

プラグインがインストールされると、package.json のスクリプトに追加されます。

{
    「スクリプト」: {
        "vite": "ノード ./bin/vite"
    }
}

pnpm を使用する学生の場合、プロジェクトのルート ディレクトリに .npmrc ファイルがない場合、自分で追加し、ファイルに shamefully-hoist=true を追加してください。そうしないと、vite プラグインのインストールが失敗する可能性があります。

2.2. プロジェクトを実行してエラーをトラブルシューティングする

2.2.1、TypeError: 未定義のプロパティ 'alias' を読み取ることができません

このエラーは、vue.config.js の configureWebpack がオブジェクト構成メソッドのみを使用できるために発生します (vue cli はオブジェクトと関数の両方をサポートしています)。

2.2.2 「/src/components/editPwd」への無制限のファイルシステムアクセス

この問題の原因は、vite のデフォルト設定の拡張子に .vue が含まれていないことです。解決策:

1. vue.configに拡張機能を追加する

// vue.config.js
モジュール.エクスポート = {
    Webpackを構成する:{
        解決する:{
            拡張子: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"]
        }
    }
}

2. インポート時に、すべての vue コンポーネントにサフィックス .vue を追加します。

2.2.3. 起動ポートが8080ではない

viteのデフォルトの起動ポートは3000なので、vue.config.jsのdevServerにポート:8080を追加する必要があります。

// vue.config.js
モジュール.エクスポート = {
    開発サーバー:{
        ポート: 8080
    }
}

2.2.4. 開発中のプロキシ障害

プロキシが失敗する理由: vuecli の書き換え構成は pathRewrite ですが、vite では rewrite です。

解決:

モジュール.エクスポート = {
    開発サーバー: {
        ポート: 8080、
        プロキシ: {
            "/api/コスト/": {
                ターゲット: "http://localhost:9331",
                変更元: true、
                パス書き換え: {
                    "^/api/コスト/": "/",
                },
                書き換え: path => path.replace(/^\/api\/cost\//, "/"), // vite に適応
            },
            "/api/import/": {
                ターゲット: "http://localhost:9332",
                変更元: true、
                パス書き換え: {
                    "^/api/import/": "/",
                },
                書き換え: path => path.replace(/^\/api\/import\//, "/"), // vite に適応
            },
            "/api/": {
                ターゲット: "http://localhost:9333",
                ws: 真、
                変更元: true、
                パス書き換え: {
                    "^/api/": "/",
                },
                書き換え: path => path.replace(/^\/api\//, "/"), // vite に適応
            },
        },
    },
}

3. アップグレード完了

これでアップグレード プロセス全体が終了しました。全体的には、それほど大きな問題もなく、比較的スムーズに進みました。また、ほとんどの問題は比較的簡単に解決できました。

これで、古い vue プロジェクトに vite サポートを追加する方法に関するこの記事は終了です。古い vue プロジェクトに vite を追加する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も皆様に 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vite+ElectronでVUE3デスクトップアプリケーションを素早く構築
  • Vite2.x に基づく Vue 3.x プロジェクトの実装
  • vite2.0+vue3 モバイルプロジェクトの詳細な説明
  • vite を使用して vue3 アプリケーションを構築する方法
  • Vue3とViteについて

<<:  HttpとHttpsの両方をサポートするNginxの詳細な設定

>>:  MySQL 8.0 ディクショナリテーブル拡張の詳細な説明

推薦する

JavaScriptにおけるこのポインティング問題の詳細な説明

序文信じてください。この記事の 7️⃣ ステップを覚えておけば、JS の this リファレンスを完...

React Hook の使用例 (一般的なフック 6 つ)

1. useState: 関数コンポーネントに状態を持たせる使用例: // カウンター impor...

JavaScript はマウスのドラッグを実装して div のサイズを調整します

この記事では、マウスをドラッグしてdivのサイズを調整するJavaScriptの具体的なコードを参考...

MySQL がデュアルマスターで構成されている場合にデータループの競合を回避する方法

あなたはこの質問について考えたことがあるでしょうか?デュアルアクティブが構成されている場合、データル...

IE7 互換モードで IE8 を有効にするコード

最も人気のあるタグはIE8ですブラウザベンダーはバージョンアップデートのリリースに躍起になっている一...

CSSレイアウトにおけるフローティング問題に対する4つの解決策の詳細な説明

1. 原因:サブボックスをフロートに設定した後の効果: 青いボックスをフロートに設定すると、標準のド...

border-image を使用してテキストバブルの境界線を実装する方法のサンプルコード

開発中に、非常に単純なテキストバブル効果に遭遇しました。これは、おおよそ次のようになります。 うーん...

Linuxシステムにおけるキー認証に基づくSSHサービスのプロセス

ご存知のとおり、SSH は現在、リモート ログイン セッションやその他のネットワーク サービスにセキ...

docker pull imageエラーの問題を解決する

説明する: Windows 10 に VM をインストールし、VM で Docker を実行し、Do...

Linux ベースの MySQL マスター スレーブ構成の全プロセスを記録する

mysql マスタースレーブ構成1. 準備ホスト: 192.168.244.128スレーブ: 192...

CSS の複雑なセレクターと CSS のフォントスタイルと色属性の詳細な説明

これまでに CSS の基本的なセレクターをいくつか学習しましたが、今日は CSS の複雑なセレクター...

JavaScriptを使って動的にテーブルを生成するケースの詳しい説明

目次序文実装のアイデア実装コード成果を達成する序文これは、テーブルを動的に追加する例です。[追加] ...

HTML で dl(dt,dd)、ul(li)、ol(li) を使用する方法

HTML <dl> タグ#定義と使用法<dl> タグは定義リストを定義します...

MYSQL マスタースレーブ レプリケーションの知識ポイントの概要

単一の MYSQL サーバーが現在の Web サイトのトラフィックに対応できない場合の最適化ソリュー...

Vue コンポーネントの切り替え、動的コ​​ンポーネント、コンポーネントのキャッシュについて

目次1. コンポーネント切り替え方式方法1: v-ifとv-elseを使用する方法 2: 組み込みコ...