Vue + TypeScript(vue-class-component) + webpackで構築したVueが動かない

Question

Vue + TypeScript(vue-class-component) + webpackで環境を構築しているのですが、うまく動きません。

<template>タグの中にHtmlタグを表示すると画面に出力されるのですが、

・Vueコンポーネントのプロパティにアクセスできない
(App.Vueにプロパティを用意してもtemplateからアクセスできない)
・Createdなどのメソッドが呼び出されない
（App.vueのCreatedが呼び出されない）
・vue-routerが機能しない
(router-linkを配置すると、画面にリンクは表示されるが、クリックしても対象のコンポーネントは表示されない)

等の問題が発生しています。

エントリーポイントのmain.tsで、Vueインスタンス作成前後はconsole.logを置いて呼び出されていることを確認できました。
ですがそれ以降のjsが呼び出されてないようです...

vue-cliを使わずに環境を構築しているのですが、環境に問題があるのでしょうか。
かなり長い時間つまづいてしまっており、どうかお力をお貸し頂けないでしょか。

一時的にgithubにソースを公開しますので、ご確認頂けないでしょうか。
大変お手数をおかけしますが、何卒よろしくお願いします。

https://github.com/KentaFukudaYHN/FezClothes/tree/feature/login_client/client

Answer 1

webpack.config.jsの設定。
vueを使ってるようなのでtsの下りでoptionsを付けると何か変わらないでしょうか？
（正常動作、或いはエラーメッセージの内容が変わるかなと。）

{
  //拡張子.tsの場合
  test: /.ts$/,
  use: [{
    loader: 'ts-loader',
    options: {
      appendTsSuffixTo: [/.vue$/]
    }
  }]
},

Comments

[退会済みユーザー]

上記のOptionつけると、Createdメソッドも動くし、プロパティにアクセスすることもできました！！
ありがとうございます!

ただvue-routerは動かなくて、別の問題の可能性が高いですが引き続き調べてみます！

本当にありがとうございます。

[退会済みユーザー]

やはりvue-routerは別問題でした。
componentがconponetになってました...
誤り : const routes = [{ path: '/', componet: Login }]
正 ：const routes = [{ path: '/', component: Login }]

これですべての問題が解決しました！ありがとうございますm(__)m!!

[退会済みユーザー]

どうやら
options: { appendTsSuffixTo: [/.vue$/] }
がないと、TSファイルからVueファイルを読み込めないようです。

こちらを参考
https://zenn.dev/karan_coron/articles/6e7681e4f33be9429733
たしかに、その通りの動作になっていました...

※公式リファレンスを調べた訳ではないので注意