Vuetify 導入直後にやること

Vue.js 勉強中で、見た目が良さそうな Vuetify を使ってみているのですが、最初の導入時点でやることがあったのでメモしておきます。

導入まで

vue add vuetify

上記コマンドを実行するとプロジェクトに Vuetify を追加できる。このときに各種ファイルが書き換わるので注意すること。

この状態で npm run serve でサーバーを開始してもエラーが出るので、 tsconfig.json を開き、以下の部分を修正する。

"compilerOptions:" : {
    .... (省略)
    "types": [
      "webpack-env", "vuetify"
    ],

types に vuetify を追加するとエラーなく実行できる。

ビルド用設定

出力先フォルダを “built” に変更するには、 tsconfig.json を変更するのではなく vue.config.js を作成して設定する方法が必要。 Vue コマンドで作っている場合、tsconfig.json を変更しても npm run build で生成される先は dist になるので注意する。

vue.config.js の中身は次のように設定する。

module.exports = {
  outputDir: "./built",
};

またこの状態でビルドすると、容量警告が表示されてしまう。とりあえず以下のように設定して、対処をしている。少ない容量ですむような心がけは忘れないようにしよう。

module.exports = {
  configureWebpack: {
      performance: {
      maxEntrypointSize: 1024000,
      maxAssetSize: 1024000,
    },
  }
};

これらの設定を行って、ようやく動作確認用サーバー起動やビルド出力時の警告がいったん消えるのでここから作業を始めるようにします。

デバッガー用設定

VSCode を用いてデバッグするために、各種設定をしておきます。
launch.json は “Debugger for Chrome” 拡張をインストールした後でデフォルト生成されるものにいくつかのパラメータを追加しておきます。うまく動作するものの例を以下に示します。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}",
      "breakOnLoad": true,
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///*": "*",
        "webpack:///./~/*": "${webRoot}/node_modules/*",
        "meteor://💻app/*": "${webRoot}/*"
      }
    }
  ]
}

これだけではブレークポイントが設定されないようで、vue.config.js も編集します。

module.exports = {
  configureWebpack: {
    ... (略)
    devtool: 'source-map',
  },
  ....
};

tsconfig.json で SourceMap が有効化されていない場合にはそちらも修正しておきます。

まとめ

いつもデバッグ可能な状態にするまでに手間取るので、必要なことを自分のために残してみました。勉強始めたばかりではあるので、無駄なところがあるかもしれません。