投稿
こんにちは、フリー写真素材サイト「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で推奨されている記述方法に変更することをおすすめします。
前回公開したwebpack4から5へ移行編が完了している想定で進めます。
基本は公式情報を参考にVue3へのアップグレードを行っていきます。
npm i -D vue-loader@16
npm i vue@3
package.jsonを確認し先程インストールしたvueと同じバージョンをインストールする
npm i @vue/compat@3
npm i -D @vue/compiler-sfc@3
package.jsonを確認し、vue、@vue/compat、@vue/compiler-sfcのバージョンが同じことを確認する
{
"dependencies": {
"vue": "^3.2.47",
"@vue/compat": "^3.2.47"
}
"devDependencies": {
"@vue/compiler-sfc": "^3.2.47"
}
}
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
resolve: {
alias: {
vue: "@vue/compat",
},
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
options: {
compilerOptions: {
compatConfig: {
MODE: 2,
},
},
},
},
],
},
};
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 };
}
- 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");
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推奨の記述方法へ変更することをおすすめします。
@Componentが削除されているため使用する場合は@Optionsを使用します。
import { Vue } from "vue-property-decorator";
export default class App extends Vue {
public mounted(): void {
}
}
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推奨の記述方法に変更することをおすすめします。
npm uninstall @vue/compat
今回上記の操作を行ったコードをこちらで公開しています。
コピー後に
npm i
npm run dev
を行っていただければ実行できます。