VS Code Vetur搭配Nuxt时Pug模板SFC组件自动导入失效求助

修复步骤 #

• 开启Vetur模板插值服务
  打开VS Code设置，搜索Vetur > Experimental: Template Interpolation Service，勾选该选项。该配置负责Vetur对Pug等非HTML模板的语法解析、自动补全与导入识别支持。
• 配置Vetur自定义块语法识别
  在VS Codesettings.json中添加如下配置：

  "vetur.grammar.customBlocks": {
    "template": ["pug", "html"]
  },
  "files.associations": {
    "*.vue": "vue"
  }
  

  配置完成后按Ctrl+Shift+P（Mac为Command+Shift+P），执行Vetur: Generate grammar from vetur.grammar.customBlocks命令，重启VS Code生效。
• 确认Nuxt组件自动导入配置
  检查项目根目录下的nuxt.config.ts/nuxt.config.js，确保components配置未限制模板语法，参考配置如下：

  export default defineNuxtConfig({
    components: {
      dirs: [
        '~/components',
        {
          path: '~/components',
          extensions: ['.vue'],
          pathPrefix: false
        }
      ]
    }
  })
  

• 回退Vetur稳定版本（可选）
  如果是更新Vetur后才出现的问题，可在扩展面板找到Vetur，点击设置按钮选择「安装另一个版本」，回退到v0.35.0及更早的稳定版本，部分Vetur新版本存在Pug模板解析的已知兼容问题。

内容的提问来源于stack exchange，提问作者Krezo