Vue2 の既存プロジェクトを Vue3 に移行で発生したエラーと解決方法

element-ui を element-ui-plus に変更する

element-ui は Vue3に対応してないので、Vue3に対応してるelement-ui-plusに変更する必要がある。
element-ui を削除
npm remove element-ui
element-ui-plus をインストール
npm install element-ui-plus

webpack.config.js を編集する

ESMバンドルのパスを変更

Vue 3では、ESMバンドルの場所が変更になっているため、エイリアスの設定を変更する。
変更前

alias: {
  vue$: 'vue/dist/vue.esm.js',
},

変更後

alias: {
  vue$: 'vue/dist/vue.runtime.esm-bundler.js',
},

Alias の vue$: ‘vue/dist/vue.runtime.esm-bundler.js’ の設定はなぜ必要か？

• runtimeを読み込むことによってバンドルサイズを小さくする（コンパイラーが省かれてる）
• vue.runtime はVueの関数がパッケージされたもの。Vueの関数が実行できる
• esm（ECMAScriptモジュールの略）で import, export ができるようになる
• bundler は Webpackなどに一緒に使われることを意味する

参考ページ：https://vuejs.org/guide/scaling-up/tooling.html#project-scaffolding

ツリーシェイキングの警告を解消する

Feature flags VUE_OPTIONS_API, VUE_PROD_DEVTOOLS are not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle.

For more details, see https://link.vuejs.org/feature-flags.

plugins: [
    // ... その他のプラグイン ...

    new webpack.DefinePlugin({
      __VUE_OPTIONS_API__: true, // Vue2からある機能のOptions API を利用するように設定する
      __VUE_PROD_DEVTOOLS__: false, // 本番環境でのVue Devtoolsを無効にする
    }),
  ],

ツリーシェイキング（Tree Shaking）は、モジュールバンドラー（例：WebpackやRollup）の機能の一つで、不要なコード（特に未使用のエクスポート）を最終的なバンドルから取り除くプロセスを指します。

Vue の import を変更

Vue 3では、Vueオブジェクトのデフォルトエクスポートは存在しないため、import Vue from ‘vue’のようなインポートは機能しません。
代わりに、Vue 3では、必要な機能やAPIを個別にインポートする必要があります。
変更前
import Vue from 'vue';
変更後
import { createApp } from 'vue';

Filterは使えなくなるのでメソッドや算出プロパティに変更する

Vue2のFilterは廃止になりました。methodや computed に移行する必要がある