nuxtプロジェクトでサブディレクトリにtsconfig.jsを配置した時のimportエラーを解消する

5514 ワード
VSCode Vetur nuxt.js TypeScript TypeScript テキストリンク

動作環境

エディタ：VScode
nuxt.js2系 + typescript

現象

プロジェクトのサブディレクトリにnuxtアプリケーションを作成。
コンポーネントをimportで読み込もうとするとエラーになる。

sample.vue
<script lang="ts">
import ButtonMedium from '@/components/ui/ButtonMedium.vue';

export default {
 //
};

エラー内容

Cannot find module '@/components/ui/ButtonMedium.vue' or its corresponding type declarations.Vetur(2307)

原因

VScodeのVeturが原因でした。
デフォルトの設定では、tsconfig.jsがルートディレクトリに存在していないと、Veturがtsconfig.jsを読み込むことができず、パス解決ができません。

解決方法

vetur.config.jsでrootの設定を変更してあげればOKでした。

nuxtプロジェクトのディレクトリ構成

nuxtProject
├── application //nuxtアプリケーション
├── docker
├── docker-compose.yml
└── vetur.config.js

vetur.config.jsの設定

vetur.config.js

/** @type {import('vls').VeturConfig} */
module.exports = {
  // **optional** default: `{}`
  // override vscode settings
  // Notice: It only affects the settings used by Vetur.
  settings: {
    "vetur.useWorkspaceDependencies": true,
    "vetur.experimental.templateInterpolationService": true
  },
  // **optional** default: `[{ root: './' }]`
  // support monorepos
  projects: [
    {
      // **required**
      // Where is your project?
      // It is relative to `vetur.config.js`.
      root: './application/', //ここをnuxtアプリケーションのルートを指定
      // **optional** default: `'package.json'`
      // Where is `package.json` in the project?
      // We use it to determine the version of vue.
      // It is relative to root property.
      package: './package.json',
      // **optional**
      // Where is TypeScript config file in the project?
      // It is relative to root property.
      tsconfig: './tsconfig.json',
      // **optional** default: `'./.vscode/vetur/snippets'`
      // Where is vetur custom snippets folders?
      snippetFolder: './.vscode/vetur/snippets',
      // **optional** default: `[]`
      // Register globally Vue component glob.
      // If you set it, you can get completion by that components.
      // It is relative to root property.
      // Notice: It won't actually do it. You need to use `require.context` or `Vue.component`
      globalComponents: [
      ]
    }
  ]
}

以上。

参考
https://zukucode.com/2021/02/vscode-vetur-subdirectory.html