古い 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 を応援していただければ幸いです。