Vetur项目配置指南：从基础到高级设置

原创于 2025-06-07 09:21:17 发布 · 391 阅读

3 ·

CC 4.0 BY-SA版权

Vetur项目配置指南：从基础到高级设置

前言

Vetur作为Vue.js生态中重要的开发工具，为开发者提供了强大的Vue单文件组件(SFC)支持。本文将全面介绍如何配置Vetur以优化Vue开发体验，涵盖从基础配置到高级特性的完整流程。

基础环境准备

语法高亮扩展

为了获得完整的语法支持，建议安装以下扩展：

Sass扩展：提供Sass/SCSS语法高亮支持
Stylus扩展：为Stylus语法提供高亮
ESLint扩展：实现对Vue和JS文件的代码检查

这些扩展与Vetur配合使用，可以创建完整的Vue开发环境。

VS Code基础配置

ESLint集成

在VS Code设置中配置ESLint以支持Vue文件检查：

打开设置界面
- Windows/Linux: 文件 > 首选项 > 设置
- macOS: Code > 首选项 > 设置
添加Vue到ESLint验证范围：

"eslint.validate": [
  "javascript",
  "javascriptreact",
  "vue"
]

此配置确保ESLint能够正确解析Vue单文件组件中的脚本部分。

项目基础配置

必备文件

Vetur需要以下文件来正确工作：

package.json：位于项目根目录，Vetur通过它确定Vue版本
配置文件：jsconfig.json或tsconfig.json

配置文件示例

JavaScript项目配置

{
  "include": [
    "./src/**/*"
  ]
}

TypeScript项目配置

{
  "include": [
    "./src/**/*"
  ],
  "compilerOptions": {
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "sourceMap": true,
    "allowJs": true
  }
}

配置文件选择指南

纯TypeScript项目：使用tsconfig.json
纯JavaScript项目：使用jsconfig.json
混合项目：同时使用两者，并在tsconfig.json中设置allowJs: true

路径映射配置

当项目使用Webpack别名或TypeScript路径映射时，需要在配置文件中进行相应设置。

示例项目结构

└── src
    ├── components
    │   ├── a.vue
    │   └── b.vue
    ├── containers
    │   └── index.vue
    ├── index.js
    └── jsconfig.json

对应配置

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "components/*": ["src/components/*"]
    }
  }
}

这样可以在Vue组件中直接使用：

import a from 'components/a.vue'

TypeScript支持

类型声明文件

为了让TypeScript能够识别Vue单文件组件，需要创建类型声明文件。

Vue 2项目

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

Vue 3项目

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

高级配置

多仓库项目配置

对于monorepo项目或特殊项目结构，可以使用vetur.config.js进行高级配置。

基础配置示例

module.exports = {
  settings: {
    "vetur.useWorkspaceDependencies": true,
    "vetur.experimental.templateInterpolationService": true
  },
  projects: [
    './packages/repo2',
    {
      root: './packages/repo1',
      package: './package.json',
      tsconfig: './tsconfig.json',
      snippetFolder: './.vscode/vetur/snippets',
      globalComponents: [
        './src/components/**/*.vue'
      ]
    }
  ]
}

Yarn PnP支持

Vetur支持Yarn PnP，但有一些限制条件：

不要在monorepo中混合使用普通项目和PnP项目
Prettier不支持自动加载PnP插件

Yarn PnP配置示例

const path = require('path')

module.exports = {
  settings: {
    "vetur.useWorkspaceDependencies": true,
    "typescript.tsdk": path.resolve(__dirname, '.yarn/sdks/typescript/bin'),
  },
}