1. はじめに会社のプロジェクトを引き継いで2年になります。今では毎回プロジェクトを起動するのに1分近くかかり、HMRは数秒かかります。しかし、Vite2がリリースされてから、光が見えてきましたが、アップグレードしたことはありませんでした。昨日、ついに我慢できなくなり、アップグレード後数秒で完了しました。 vite は、Vue の作者 Yuxi You によって開発された Web 開発ツールです。次の機能があります。 高速コールドスタート インスタントモジュールホットアップデート 真のオンデマンドコンパイル 2. アップグレードを開始する
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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: HttpとHttpsの両方をサポートするNginxの詳細な設定
>>: MySQL 8.0 ディクショナリテーブル拡張の詳細な説明
序文信じてください。この記事の 7️⃣ ステップを覚えておけば、JS の this リファレンスを完...
1. useState: 関数コンポーネントに状態を持たせる使用例: // カウンター impor...
この記事では、マウスをドラッグしてdivのサイズを調整するJavaScriptの具体的なコードを参考...
あなたはこの質問について考えたことがあるでしょうか?デュアルアクティブが構成されている場合、データル...
最も人気のあるタグはIE8ですブラウザベンダーはバージョンアップデートのリリースに躍起になっている一...
1. 原因:サブボックスをフロートに設定した後の効果: 青いボックスをフロートに設定すると、標準のド...
開発中に、非常に単純なテキストバブル効果に遭遇しました。これは、おおよそ次のようになります。 うーん...
ご存知のとおり、SSH は現在、リモート ログイン セッションやその他のネットワーク サービスにセキ...
説明する: Windows 10 に VM をインストールし、VM で Docker を実行し、Do...
mysql マスタースレーブ構成1. 準備ホスト: 192.168.244.128スレーブ: 192...
これまでに CSS の基本的なセレクターをいくつか学習しましたが、今日は CSS の複雑なセレクター...
目次序文実装のアイデア実装コード成果を達成する序文これは、テーブルを動的に追加する例です。[追加] ...
HTML <dl> タグ#定義と使用法<dl> タグは定義リストを定義します...
単一の MYSQL サーバーが現在の Web サイトのトラフィックに対応できない場合の最適化ソリュー...
目次1. コンポーネント切り替え方式方法1: v-ifとv-elseを使用する方法 2: 組み込みコ...