古い 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 ディクショナリテーブル拡張の詳細な説明

推薦する

Reactでコンポーネントを作成する方法

目次序文コンポーネントの紹介クラスコンポーネントの作成状態についてレンダリングについて関数コンポーネ...

Vueモバイル端末は画面上で指をスライドさせる方向を判定する

vueモバイル端末は、画面上で指をスライドさせる方向を判断します。具体的な内容は次のとおりです。これ...

TypeScript 名前空間のマージの説明

目次同じ名前の名前空間をマージする名前空間とその他の種類のマージ同じ名前の名前空間とクラスをマージす...

HTML 要素に注釈を付けるときにクラスと ID のどちらが優れているかを分析する

Web ページには、非常に複雑な HTML 構造があります。CSS を使用して関連するスタイルを定義...

オンラインチャットを実現するVue+sshフレームワーク

この記事では、オンラインチャットを実現するためのVue + sshフレームワークの具体的なコードを参...

Linux でハードディスクのサイズを確認し、ハードディスクをマウントする方法

Linux には、マウントされたハードディスクとマウントされていないハードディスクの 2 種類のハー...

Vueはフォーム検証機能を実装します

この記事では主に、NUXT の validate メソッドに基づいてフォーム検証を実装する方法につい...

JSブラウザストレージの詳しい説明

目次導入クッキークッキーとはクッキー生成方法クッキーの適用シナリオクッキーのデメリット回避策ローカル...

Dockerプライベートライブラリの実装

プライベート Docker レジストリのインストールとデプロイは、Docker テクノロジーを導入、...

MySQL における exists、in、any の基本的な使い方

【1】存在するループを使用して外部テーブルを 1 つずつクエリし、各クエリの存在する条件ステートメン...

Vue-Jest自動テストの基本構成の詳しい説明

目次インストール構成よくある間違い事前テスト作業依存関係の扱いインスタンスとDOMを生成する要約する...

スクロールバーがスペースを占有することで発生するバグを修正しました

背景このバグは滾動條占據空間ことで発生していました。いくつかの情報を確認して、ようやく解決しました。...

VMware15/16 VMwareのロックを解除してMacOSをインストールする詳細な手順

VMware バージョン: VMware-workstation-full-16 VMware バー...

HTML5+CSS3 ヘッダー作成例と更新

前回、私たちは 2 つのヘッダー レイアウト (フレックスボックス 1 つとフロート 1 つ) を考...

MySQLの3つの用途と違いは同等ではない

MySQLでは判定記号がよく使われますが、等しくない記号はもっと一般的に使われます。次の3つの等しく...