VueのWebpackエラーを無理やり解消した話

auです。

Vueのプロジェクトで使っているライブラリの脆弱性があるバージョンの更新と使っていないライブラリの削除を目的としてバージョンを変更したらWebpackのバージョンも変わってしまい、エラーの沼にはまりました。

program-shoshinsya.hatenablog.com

program-shoshinsya.hatenablog.com

解決策

もう新しいプロジェクトを作って必要なnode_moduleを作り直そうと決心しました。

その際に、Vueも3系から4系にしたりしました。最新の方が勉強になるかと思ったのです。

その際に若干の差分がありました。vue-routerがなかったりですね。

実際にやったこと

1. 新しいプロジェクトを作成する

vue create project-name

2. 元々のプロジェクトで使っていたsrcファイルをコピーする

3系で使っていたsrcをそのまま置き換えました。

ファイル構成は以下の記事を参照しました。

qiita.com

3. インストールされていないパッケージを入れ直す

npm run serve

のコマンドを実行すると、インストールされていないパッケージがエラーとして表示されます。順番に入れていくだけですね。

4. main.jsを修正する

main.jsのデフォルトの構成が変わっていたので修正しました。

修正前

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

修正後

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import 'vue-sidebar-menu/src/scss/vue-sidebar-menu.scss'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

routerを入れた形になります。4系のSPAのルーティングがあるのかと思いましたが、このやり方に慣れているしこのままで行こうと思います。

無事にエラー発生前と同じ状態まで戻すことができました・・・。大人しく新しくプロジェクトを作る方が何倍も早かったですね。