一篇文章理解tsconfig.json和vue.config.js

tsconfig.json 和 vue.config.js 是 Vue 项目中常用到的两个配置文件，但是有时候不知道里面应该配什么内容，二者有何区别。首先两者是不同层面的配置文件，分别用于不同的目的。

tsconfig.json

主要用于指定如何编译 TypeScript 代码。它控制编译器的行为，例如目标 JavaScript 版本、模块系统、是否允许 JavaScript 文件被编译等。在 Vue 项目中，当采用 TypeScript 时，tsconfig.json 的配置至关重要。

例如以下tsconfig.json配置，这是我在某项目中的配置：

javascript 复制代码

{
  "compilerOptions": {
    "target": "es6",//输出ES6代码
    "module": "esnext",//保留ES模块给打包器处理
    "strict": false,//关闭严格类型检查
    "jsx": "preserve",
    "moduleResolution": "node",//按node方式解析模块
    "experimentalDecorators": true,//支持装饰器
    "skipLibCheck": true,//跳过第三方声明文件检查
    "esModuleInterop": true,//兼容CommonJS默认导入，通常与allowSyntheticDefaultImports一起使用。
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,//类字段用define定义
    "sourceMap": true,
    "resolveJsonModule": true,//允许导入JSon
    "baseUrl": ".",//用于设置模块解析的基础路径,将基础路径设置为项目的根目录
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/**/*.json",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

• baseUrl/paths：@/* 映射到 src/*

• lib：包含 esnext 与 DOM 相关类型

• include/exclude：编译 src、tests，排除 node_modules

vue.config.js

是 Vue CLI 项目中的一个可选配置文件，用于自定义 Vue 项目的构建。它允许开发者覆盖 Vue CLI 默认的 Webpack 配置、调整开发服务器设置、定义环境变量等。这个文件主要用于定制构建过程和开发体验。

举个具体例子：

javascript 复制代码

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  // 部署应用包时的基本 URL
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  
  // 输出文件目录
  outputDir: 'dist',
  
  // 静态资源目录
  assetsDir: 'static',
  
  // 指定生成的 index.html 的输出路径
  indexPath: 'index.html',
  
  // 是否使用 eslint-loader 进行语法检查
  lintOnSave: process.env.NODE_ENV !== 'production',
  
  // 是否使用包含运行时编译器的 Vue 构建版本
  runtimeCompiler: false,
  
  // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件
  transpileDependencies: true,
  
  // 生产环境是否生成 source map 文件
  productionSourceMap: false,

  // CSS 相关选项
  css: {
    // 是否使用 CSS 分离插件
    extract: process.env.NODE_ENV === 'production',
    // 是否开启 CSS source map
    sourceMap: false,
    // CSS 预设器配置
    loaderOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  },

  // webpack 配置
  configureWebpack: config => {
    // 生产环境配置
    if (process.env.NODE_ENV === 'production') {
      // 配置打包分析工具
      config.optimization.splitChunks = {
        chunks: 'all',
        cacheGroups: {
          vendor: {
            name: 'chunk-vendors',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial'
          },
          elementUI: {
            name: 'chunk-elementUI',
            priority: 20,
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/
          }
        }
      }
    }
  },

  // webpack 链式配置
  chainWebpack: config => {
    // 配置别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
      .set('views', resolve('src/views'))
    
    // 配置 svg 图标
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  },

  // 开发服务器配置
  devServer: {
    // 端口号
    port: 8080,
    // 主机地址
    host: '0.0.0.0',
    // 是否自动打开浏览器
    open: true,
    // 配置代理
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    // 配置 webpack-dev-server 中间件
    before: require('./mock/mock-server.js')
  },

  // 第三方插件配置
  pluginOptions: {
    // 配置 webpack-bundle-analyzer 插件
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
        resolve('src/styles/variables.scss')
      ]
    }
  }
})

// 路径解析函数
function resolve(dir) {
  return require('path').join(__dirname, dir)
}

总结：

配置文件	用途	主要影响范围
tsconfig.json	控制 TypeScript 编译行为	TypeScript 编译和类型检查
vue.config.js	自定义 Vue CLI 构建与开发配置	Webpack、开发服务器等