webpack4から5へ移行、Vue2から3へ移行ビルドを通す【Vue2（vue-property-decorator）から3へ移行ビルドを通す】
投稿
こんにちは、フリー写真素材サイト「Canvaspace」管理人のYasuです。
今回はwebpack4から5へ移行、Vue2から3へ移行ビルドを通すの「Vue2（vue-property-decorator）から3へ移行ビルドを通す」編の解説になります。
なぜ書いたか
今回はVue2 + TypeScriptを使用しているかつ、vue-property-decoratorを使用しています。
ですが、vue-property-decoratorがVue3に対応しているか情報が少ない事や、vue-property-decoratorを使用したままVue3にアップグレードする方法が見つからなかったためこの記事を書きました。
結論から言うとvue-property-decoratorを使用していてもVue3へのアップグレードは行えます！
ただし、アップグレードできてもvue-property-decoratorは安定版のリリースから2年が経過しているため、CompositionAPIやvue-facing-decoratorなどVue3で推奨されている記述方法に変更することをおすすめします。
Vue2からVue3へのアップグレード手順
前回公開したwebpack4から5へ移行編が完了している想定で進めます。
基本は公式情報を参考にVue3へのアップグレードを行っていきます。
①vue-loaderをバージョン16以上にアップグレード
npm i -D vue-loader@16②vueのバージョン3にアップグレード
npm i vue@3③vue2から3へアップグレード時に使用するパッケージを追加する
package.jsonを確認し先程インストールしたvueと同じバージョンをインストールする
npm i @vue/compat@3npm i -D @vue/compiler-sfc@3package.jsonを確認し、vue、@vue/compat、@vue/compiler-sfcのバージョンが同じことを確認する
{
"dependencies": {
"vue": "^3.2.47",
"@vue/compat": "^3.2.47"
}
"devDependencies": {
"@vue/compiler-sfc": "^3.2.47"
}
}④コンパイラモードを有効にするためにwebpackの設定ファイルに記述
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
resolve: {
alias: {
vue: "@vue/compat",
},
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
options: {
compilerOptions: {
compatConfig: {
MODE: 2,
},
},
},
},
],
},
};
⑤vue3でtypescriptを使用できるように型定義ファイルを修正する
declare module "*.vue" {
import { CompatVue } from "@vue/runtime-dom";
const Vue: CompatVue;
export default Vue;
export * from "@vue/runtime-dom";
const { configureCompat } = Vue;
export { configureCompat };
}⑥エントリーファイルをvue3形式に書き換える
- import Vue from "vue";
- import App from "./App.vue";
- new Vue({
- render: (h) => h(App),
- }).$mount("#app");
+ import { createApp } from "vue";
+ import App from "./App.vue";
+ const app = createApp(App);
app.mount("#app");⑦vue-class-component、vue-property-decoratorをアップグレードする
npm i vue-class-component@8.0.0-rc.1 vue-property-decorator@10.0.0-rc.3前に解説しましたが、vue-class-component、vue-property-decoratorともにRC版のため使用できても早期にVue3推奨の記述方法へ変更することをおすすめします。
⑧vue-property-decoratorの記述方法を変更
@Componentが削除されているため使用する場合は@Optionsを使用します。
import { Vue } from "vue-property-decorator";
export default class App extends Vue {
public mounted(): void {
}
}⑨vue-property-decoratorをVue3で使用できるようにwebpackの設定を変更する
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
options: {
compilerOptions: {
compatConfig: {
- MODE: 2,
+ MODE: 3,
},
},
},
},
],
},
resolve: {
alias: {
- vue: "@vue/compat",
- vue$: "vue/dist/vue.esm.js",
+ vue$: "vue/dist/vue.runtime.esm-bundler.js",
},
},
};ここで、再度 npm run start を行いビルドが成功すればVue3へのアップグレードは完了です。
この手順はあくまでもvue-property-decoratorをVue3で使用するための応急処置みたいな感じになるため早期にVue3推奨の記述方法に変更することをおすすめします。
⑩不要になった@vue-compatをパッケージから削除する
npm uninstall @vue/compat今回上記の操作を行ったコードをこちらで公開しています。
コピー後に
npm inpm run devを行っていただければ実行できます。