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 ディクショナリテーブル拡張の詳細な説明
目次序文コンポーネントの紹介クラスコンポーネントの作成状態についてレンダリングについて関数コンポーネ...
vueモバイル端末は、画面上で指をスライドさせる方向を判断します。具体的な内容は次のとおりです。これ...
目次同じ名前の名前空間をマージする名前空間とその他の種類のマージ同じ名前の名前空間とクラスをマージす...
Web ページには、非常に複雑な HTML 構造があります。CSS を使用して関連するスタイルを定義...
この記事では、オンラインチャットを実現するためのVue + sshフレームワークの具体的なコードを参...
Linux には、マウントされたハードディスクとマウントされていないハードディスクの 2 種類のハー...
この記事では主に、NUXT の validate メソッドに基づいてフォーム検証を実装する方法につい...
目次導入クッキークッキーとはクッキー生成方法クッキーの適用シナリオクッキーのデメリット回避策ローカル...
プライベート Docker レジストリのインストールとデプロイは、Docker テクノロジーを導入、...
【1】存在するループを使用して外部テーブルを 1 つずつクエリし、各クエリの存在する条件ステートメン...
目次インストール構成よくある間違い事前テスト作業依存関係の扱いインスタンスとDOMを生成する要約する...
背景このバグは滾動條占據空間ことで発生していました。いくつかの情報を確認して、ようやく解決しました。...
VMware バージョン: VMware-workstation-full-16 VMware バー...
前回、私たちは 2 つのヘッダー レイアウト (フレックスボックス 1 つとフロート 1 つ) を考...
MySQLでは判定記号がよく使われますが、等しくない記号はもっと一般的に使われます。次の3つの等しく...