Vue2からVue3への移行手順

Last updated at 2023-10-22Posted at 2023-10-22

Vue2のサポートが2023年12月31日をもって終了するため、業務で使用しているVue2のサービスをVue3へアップデートしました。この記事では、実際の移行手順をまとめています。

移行手順

Vue-loaderのアップデート:
```
npm i -D vue-loader@16
```
vue-loaderとは、Vue コンポーネントをプレーンな JavaScript モジュールに変換する webpack の loaderのことです。
　
Vue3のインストール:
```
npm i vue@3
```
package.jsonからVue2に関連するライブラリを削除:
使用しているライブラリがVue3対応か確認し、必要に応じて更新または新しいライブラリをインストール。

Vue 2 互換性ライブラリのインストール:

npm i @vue/compat@3

このライブラリは、Vue 2 のコードを Vue 3 と互換性を持たせるため。

vue.config.jsに以下の設定：

vue.config.js

module.exports = {
  chainWebpack: (config) => {
    config.resolve.alias.set('vue', '@vue/compat')
    config.module.rule('vue').use('vue-loader').tap((options) => {
      return {
        ...options,
        compilerOptions: {
          compatConfig: {
            MODE: 2
          }
        }
      }
    })
  }
}

単一ファイルコンポーネントコンパイラのインストール:
```
npm i -D @vue/compiler-sfc@3
```
このパッケージは、ファイルごとに分けられたコンポーネントを使用できるようにします。
　
Eslintとeslint-plugin-vueのアップデート
　
Vue CLI関連のライブラリのアップデート:
package.jsonを更新して、関連するライブラリをVue 3に対応したバージョンに更新します。
　
Eslintのparserをbabel-parserから@babel/eslint-parserに変更
　
ビルド時のエラーを修正:
```
npm run build
```
ターミナルにエラーや警告メッセージが表示されるかもしれませんが、それらを地道に解決します。eslint関連のエラーで修正が多く致命的なエラーではない場合、一時的にeslintルールをオフにすることも検討します。
　
サービスを起動:
```
npm run serve
```
- vue-routerをバージョン4にアップデートし、修正を適用します。
- Vuexをバージョン4にアップデートし、修正を適用します。
- Vue2からVue3へのアップデートに伴う破壊的な変更を修正します。
- DevToolsに表示されているエラーを解決します。
- 使用しているライブラリの仕様変更に対応します。
  　
DevToolsでエラーが消えたらvue-compatを削除:
```
npm uninstall @vue/compat@3
```
vue.config.jsを元に戻す。
　
動作確認

移行時に使用した資料

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up