NuxtのsrcDirをちょっと凝った設定にしたかっただけなんや・・


## 概要

Nuxtでのtsconfigのpathの設定で下記のようなデフォルトの設定以外の場合は、
tsconfig-paths-webpack-pluginを入れて、nuxt.config.tsでwebpackの設定を追加しましょうね
というお話

```tsconfig.json
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    }
```

## 環境

```package.json
{
  "dependencies": {
    "@nuxt/typescript-runtime": "1.0.0",
    "nuxt": "2.14.0"
  },
  "devDependencies": {
    "@nuxt/types": "2.14.0",
    "@nuxt/typescript-build": "2.0.2",
    "@nuxtjs/eslint-config": "3.1.0",
    "@nuxtjs/eslint-config-typescript": "3.0.0",
    "@nuxtjs/eslint-module": "2.0.0",
    "@nuxtjs/vuetify": "1.11.2",
    "@vue/test-utils": "1.0.3",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "10.1.0",
    "babel-jest": "26.1.0",
    "eslint": "7.5.0",
    "eslint-config-prettier": "6.11.0",
    "eslint-plugin-nuxt": "1.0.0",
    "eslint-plugin-prettier": "3.1.4",
    "jest": "26.1.0",
    "prettier": "2.0.5",
    "ts-jest": "26.1.3",
    "tsconfig-paths-webpack-plugin": "3.3.0",
    "vue-jest": "3.0.4"
  }
}

```

## 詳細

こんなディレクトリ構成にしたかった

```bash
├── README.md
├── jest.config.js
├── node_modules
├── nuxt.config.ts
├── package.json
├── src
│   ├── controller
│   ├── usecase
│   ├── presenter
│   └── view
│       ├── assets
│       ├── components
│       ├── layouts
│       ├── middleware
│       ├── pages
│       ├── plugins
│       ├── static
│       └── store
├── test
├── tsconfig.json
└── yarn.lock
```

`./src/view`配下にnuxtで使うディレクトリを突っ込みたかった。

なのでいつものようにnuxt configに`srcDir: 'src/view'`を追加
tsconfigのpathsを下記のように変更し、該当コンポーネントにaliasを使用

```tsconfig.json
    "paths": {
      "~/*": ["./src/*"],
      "@/*": ["./src/*"]
    }
```

いつものように`yarn dev`するとエラーが出る

### エラー内容
何かはわからんがcompile時のloader周りでエラーのようだ
エディタ側では正しくimportされている(該当メソッドへジャンプできる)

```bash
ERROR  Failed to compile with 3 errors                                                                                                                                                                                                               friendly-errors 22:37:08

These dependencies were not found:                                                                                                                                                                                                                    friendly-errors 22:37:08
                                                                                                                                                                                                                                                      friendly-errors 22:37:08
* @/{alias指定したパス} in ./node_modules/babel-loader/lib??ref--12-0!./node_modules/ts-loader??ref--12-1!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/view/pages/index.vue?vue&type=script&lang=ts&
* @/view/components/Logo.vue in ./node_modules/babel-loader/lib??ref--12-0!./node_modules/ts-loader??ref--12-1!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/view/pages/index.vue?vue&type=script&lang=ts&
* @/view/components/VuetifyLogo.vue in ./node_modules/babel-loader/lib??ref--12-0!./node_modules/ts-loader??ref--12-1!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/view/pages/index.vue?vue&type=script&lang=ts&
```

## やったこと

https://github.com/nuxt/typescript/issues/339#issuecomment-621239500

tsconfig-paths-webpack-pluginをインストールして
nuxt.config.tsの設定をいじる

```bash
yarn add --dev tsconfig-paths-webpack-plugin
```

```nuxt.config.ts
  build: {
    extend(config, _) {
      if (!config.resolve) {
        config.resolve = {}
      }
      if (!config.resolve.plugins) {
        config.resolve.plugins = []
      }
      config.resolve.plugins.push(
        new TsconfigPathsPlugin({ configFile: './tsconfig.json' })
      )
    },
  },
```