一、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.html
plugins: [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, // 是否开启 https
open: 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 项目如虎添翼。它们就像是项目的"控制中心",通过合理配置,你可以显著提升开发效率和代码质量。记住,配置是一个逐步优化的过程,随着项目的发展,你可能需要不断调整这些配置。保持学习和探索的态度,你会发现这些配置文件蕴含的强大力量!
