[vue3] vue/no-multiple-template-root 오류

nammm·2022년 1월 17일
0

vue.js

목록 보기
2/5

템플릿 내 html 태그로 페이지 구현중에 input태그에서 자꾸 빨간줄이 그어지며 'vue/no-multiple-template-root' 해당 오류가 떴다.

package.json이 작업 공간 루트에 없으면 Vetur는 기본적으로 package.json을 찾을 수 없으므로 vue 버전을 파악할 수 없고
이 경우 Vetur에 package.json 위치를 알려야 한다고 한다...

[해결법]

프로젝트 폴더 내에 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: [
    './packages/repo2', // Shorthand for specifying only the project root location
    {
      // **required**
      // Where is your project?
      // It is relative to `vetur.config.js`.
      root: './packages/repo1',
      // **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: [
        './src/components/**/*.vue'
      ]
    }
  ]
}
profile
퍼블리셔입니다.

0개의 댓글