Vue.jsの2系が2023年12月31日にサポートが終了するということで公式で提供されている@vue/compatを使用してVue 2からVue 3へ移行作業をしました。
開発環境
Vue.js2.7
Laravel 9x
Vite3.2
移行ビルドを導入したら画面が真っ白になった
他の記事で紹介されているケースではVueとwebpackの組み合わせがほとんどであまりVite環境で移行作業を行なっている記事が見つからず中々苦戦しました。
一応Vite環境向けの参考コミットも用意されています
https://github.com/vuejs/vue-hackernews-2.0/commit/14f6f1879b43f8610add60342661bf915f5c4b20
@vue/compatをインストールして公式の手順をなぞって参考に進めます。
@vue/compatと互換性がない部分を潰していく必要があります。
vite.config.jsを以下のように修正しました。@vue/compatのビルドを使用するためにvueを@vue/compatにエイリアスし、Vueのコンパイラオプションでcompatモードを有効にします。
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import createVuePlugin from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
laravel({
input: ['resources/sass/app.scss', 'resources/js/app.js'],
refresh: true,
}),
createVuePlugin({
template: {
compilerOptions: {
compatConfig: {
MODE: 2
}
}
}
})
],
resolve: {
alias: {
"vue": "@vue/compat"
},
},
server: {
host: true
}
});
これでnpm run devでビルドすると通常？ならVue2の時と同様に画面が表示されるはずなのですがなぜか画面が真っ白になってしまいます。コンソールを開いてみるとエラーメッセージはなく以下の警告文が出てしまいます。
[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".
at <App>どうやらvueのエイリアスにはvue/dist/vue.esm-bundler.jsを使うように促しているメッセージのようなのですが、それですとVue3のビルドが走ってしまうので移行ビルドができません。
解決策
vueエイリアスの部分を@vue/compat/dist/vue.esm-bundler.jsにすると動作するようになりました。
どうやらVue + Vite環境では@vue/compatを使用する場合でも完全ビルドを使う必要があるようでした。
参考
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import createVuePlugin from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
laravel({
input: ['resources/sass/app.scss', 'resources/js/app.js'],
refresh: true,
}),
createVuePlugin({
template: {
compilerOptions: {
compatConfig: {
MODE: 2
}
}
}
})
],
resolve: {
alias: {
"vue": "@vue/compat/dist/vue.esm-bundler.js"
},
},
server: {
host: true
}
});
これで画面が表示されるようになります。
まぁコンソールを開くとWarningだらけなので地獄はここからなんですけどね…
関連記事
