Vite 项目的核心配置- vite.config.ts 和 tsconfig.json 全解析

一、vite.config.ts 详细说明

vite.config.ts 是 Vite 项目的核心配置文件。它允许你自定义 Vite 的行为,以适应你的项目需求。

让我们来看看其中一些重要的配置选项:

import { fileURLToPath, URL } from 'node:url'// 使用 defineConfig 帮手函数，这样不用 jsdoc 注解也可以获取类型提示
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'// 此处引用了path路径导向
import path from "path"export default defineConfig({// 查看 插件 API 获取 Vite 插件的更多细节 https://www.vitejs.net/guide/api-plugin.htmlplugins: [vue(), vueJsx()],// 在生产中服务时的基本路径base: './',// 配置别名绝对路径  https://webpack.js.org/configuration/resolve/resolve: {// resolve.alias: 更轻松地为import或require某些模块创建别名alias: {// '@': fileURLToPath(new URL('./src', import.meta.url)),// 如果报错__dirname找不到，需要安装node,执行npm install @types/node --save-dev// 例如：可以使用 '@' 来代替 'src' 目录"@": path.resolve(__dirname, "./src"),"@assets": path.resolve(__dirname, "./src/assets"),"@components": path.resolve(__dirname, "./src/components"),"@views": path.resolve(__dirname, "./src/views"),"@store": path.resolve(__dirname, "./src/stores"),}},// css预处理器css: {preprocessorOptions: {// 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了// 给导入的路径最后加上 ;scss: {additionalData: '@import "@/assets/styles/global.scss";',},},},// 定义构建选项，构建输出将放在其中，如果目录存在，它将在构建之前被删除// 指定输出目录为 'dist',并使用 Terser 进行代码压缩build: {outDir: 'dist',minify: 'terser'},server: {https: false, // 是否开启 httpsopen: true, // 是否自动在浏览器中打开port: 8001, // 端口号host: "0.0.0.0",// 跨域代理proxy: {'/api': {target: "http://localhost:3000",  // 后台接口changeOrigin: true,// secure: false, // 如果是https接口，需要配置这个参数// ws: true, //websocket支持// 截取api，并用api代替// rewrite: (path) => path.replace(/^\/api/, "/api"),}},hmr: {overlay: false, // 屏蔽服务器报错},},// 引入第三方的配置optimizeDeps: {include: [],}})

二、tsconfig.json 详细说明

tsconfig.json 是 TypeScript 的配置文件,它告诉 TypeScript 编译器如何处理你的代码。

以下是一个典型的配置:

"compilerOptions": {//设置基本路径和路径映射,与 vite.config.ts 中的别名配置相对应。"baseUrl": ".",   // 工作根目录"paths": {  "@/*": ["./src/*"],"@assets/*": ["src/assets/*"],"@components/*": ["src/components/*"],"@views/*": ["src/views/*"],"@store/*": ["src/stores/*"],},"lib": [// 编译过程中需要引入的库文件的列表"es5","es2015","es2016","es2017","es2018","esnext","dom","dom.iterable","scripthost"],// 指定一个匹配列表（属于自动指定该路径下的所有ts相关文件）"include": ["src/**/*.ts","src/**/*.tsx","src/**/*.vue"],"exclude": ["node_modules","src/assets/json/*.json","src/assets/css/*.scss"],"allowUnreachableCode": true, // 不报告执行不到的代码错误。"allowUnusedLabels": false,	// 不报告未使用的标签错误"alwaysStrict": false, // 以严格模式解析并为每个源文件生成 "use strict"语句"experimentalDecorators": true, // 启用实验性的ES装饰器"noImplicitAny": false, // 是否默认禁用 any"removeComments": true, // 是否移除注释"target": "esnext",// 指定 ECMAScript 目标版本"module": "esnext", // "commonjs" 指定生成哪个模块系统代码"strict": true, // 启用所有严格类型检查选项"jsx": "preserve",  // 在 .tsx文件里支持JSX"importHelpers": true,"moduleResolution": "node","skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"suppressImplicitAnyIndexErrors": true,"sourceMap": true,  // 是否生成map文件"declaration": true, // 是否自动创建类型声明文件"declarationDir": "./lib", // 类型声明文件的输出目录"allowJs": true, // 允许编译javascript文件。//指定引入的类型声明文件，默认是自动引入所有声明文件，一旦指定该选项，则会禁用自动引入，改为只引入指定的类型声明文件，如果指定空数组[]则不引用任何文件"types": ["webpack-env","node"],},"references": [{"path": "./tsconfig.config.json"}]

这些配置让 TypeScript 能够更好地理解和检查你的代码,提供更强大的类型推断和错误检测。

实用建议:

1、根据项目需求调整 vite.config.ts

• 如果需要处理其他文件类型,可以添加相应的插件。

• 调整 server 配置以满足开发需求。

• 根据部署环境调整 build 配置。

2、优化 tsconfig.json

• 根据项目的复杂度调整 strict 模式。

• 如果使用新的 JavaScript 特性,记得在 lib 中添加相应的库。

• 根据项目结构调整 include 和 exclude。

3、保持一致性
确保 vite.config.ts 和 tsconfig.json 中的路径别名配置保持一致。

4、定期更新
随着 Vite 和 TypeScript 的更新,定期检查并更新这些配置文件,以获得最新的功能和性能改进。

三、结语:

掌握 vite.config.ts 和 tsconfig.json 的配置,可以让你的 Vite 项目如虎添翼。它们就像是项目的"控制中心",通过合理配置,你可以显著提升开发效率和代码质量。记住,配置是一个逐步优化的过程,随着项目的发展,你可能需要不断调整这些配置。保持学习和探索的态度,你会发现这些配置文件蕴含的强大力量!