Vite 项目标核心设置- vite.config.ts 和 tsconfig.json 全剖析

一、vite.config.ts 详细分析


vite.config.ts 是 Vite 项目标核心设置文件。它允许你自定义 Vite 的行为,以顺应你的项目需求。
让我们来看看其中一些重要的设置选项:

1. import { fileURLToPath, URL } from 'node:url'
3. // 使用 defineConfig 帮手函数，这样不用 jsdoc 注解也可以获取类型提示
4. import { defineConfig } from 'vite'
6. import vue from '@vitejs/plugin-vue'
7. import vueJsx from '@vitejs/plugin-vue-jsx'
9. // 此处引用了path路径导向
10. import path from "path"
13. export default defineConfig({
14.   // 查看 插件 API 获取 Vite 插件的更多细节 https://www.vitejs.net/guide/api-plugin.html
15.   plugins: [vue(), vueJsx()],
16.   // 在生产中服务时的基本路径
17.   base: './',
18.   // 配置别名绝对路径  https://webpack.js.org/configuration/resolve/
19.   resolve: {
20.     // resolve.alias: 更轻松地为import或require某些模块创建别名
21.     alias: {
22.       // '@': fileURLToPath(new URL('./src', import.meta.url)),
23.       // 如果报错__dirname找不到，需要安装node,执行npm install @types/node --save-dev
24.       // 例如：可以使用 '@' 来代替 'src' 目录
25.       "@": path.resolve(__dirname, "./src"),
26.       "@assets": path.resolve(__dirname, "./src/assets"),
27.       "@components": path.resolve(__dirname, "./src/components"),
28.       "@views": path.resolve(__dirname, "./src/views"),
29.       "@store": path.resolve(__dirname, "./src/stores"),
30.     }
31.   },
32.   
33.    // css预处理器
34.   css: {
35.       preprocessorOptions: {
36.         // 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了
37.         // 给导入的路径最后加上 ;
38.         scss: {
39.           additionalData: '@import "@/assets/styles/global.scss";',
40.         },
41.       },
42.    },
43.   // 定义构建选项，构建输出将放在其中，如果目录存在，它将在构建之前被删除
44.   // 指定输出目录为 'dist',并使用 Terser 进行代码压缩
45.   build: {
46.     outDir: 'dist',
47.     minify: 'terser'
48.   },
49.   server: {
50.     https: false, // 是否开启 https
51.     open: true, // 是否自动在浏览器中打开
52.     port: 8001, // 端口号
53.     host: "0.0.0.0",
54.     // 跨域代理
55.     proxy: {
56.       '/api': {
57.         target: "http://localhost:3000",  // 后台接口
58.         changeOrigin: true,
59.         // secure: false, // 如果是https接口，需要配置这个参数
60.         // ws: true, //websocket支持
61.         // 截取api，并用api代替
62.         // rewrite: (path) => path.replace(/^\/api/, "/api"),
63.       }
64.     },
65.     hmr: {
66.         overlay: false, // 屏蔽服务器报错
67.     },
69.   },
71.   // 引入第三方的配置
72.   optimizeDeps: {
73.     include: [],
74.   }
76. })

复制代码

二、tsconfig.json 详细分析


tsconfig.json 是 TypeScript 的设置文件,它告诉 TypeScript 编译器如何处理你的代码。
以下是一个典型的设置:

1. "compilerOptions": {
3.         //设置基本路径和路径映射,与 vite.config.ts 中的别名配置相对应。
4.     "baseUrl": ".",   // 工作根目录
5.     "paths": {  
6.       "@/*": ["./src/*"],
7.       "@assets/*": ["src/assets/*"],
8.       "@components/*": ["src/components/*"],
9.       "@views/*": ["src/views/*"],
10.       "@store/*": ["src/stores/*"],
11.     },
12.    
13.     "lib": [// 编译过程中需要引入的库文件的列表
14.       "es5",
15.       "es2015",
16.       "es2016",
17.       "es2017",
18.       "es2018",
19.       "esnext",
20.       "dom",
21.       "dom.iterable",
22.       "scripthost"
23.     ],
24.     // 指定一个匹配列表（属于自动指定该路径下的所有ts相关文件）
25.     "include": [
26.       "src/**/*.ts",
27.       "src/**/*.tsx",
28.       "src/**/*.vue"
29.     ],
30.     "exclude": [
31.       "node_modules",
32.       "src/assets/json/*.json",
33.       "src/assets/css/*.scss"
34.     ],
35.     "allowUnreachableCode": true, // 不报告执行不到的代码错误。
36.     "allowUnusedLabels": false,        // 不报告未使用的标签错误
37.     "alwaysStrict": false, // 以严格模式解析并为每个源文件生成 "use strict"语句
38.     "experimentalDecorators": true, // 启用实验性的ES装饰器
39.     "noImplicitAny": false, // 是否默认禁用 any
40.     "removeComments": true, // 是否移除注释
41.     "target": "esnext",// 指定 ECMAScript 目标版本
42.     "module": "esnext", // "commonjs" 指定生成哪个模块系统代码
43.     "strict": true, // 启用所有严格类型检查选项
44.     "jsx": "preserve",  // 在 .tsx文件里支持JSX
45.     "importHelpers": true,
46.     "moduleResolution": "node",
47.     "skipLibCheck": true,
48.     "esModuleInterop": true,
49.     "allowSyntheticDefaultImports": true,
50.     "suppressImplicitAnyIndexErrors": true,
51.     "sourceMap": true,  // 是否生成map文件
52.     "declaration": true, // 是否自动创建类型声明文件
53.     "declarationDir": "./lib", // 类型声明文件的输出目录
54.     "allowJs": true, // 允许编译javascript文件。
55.     //指定引入的类型声明文件，默认是自动引入所有声明文件，一旦指定该选项，则会禁用自动引入，改为只引入指定的类型声明文件，如果指定空数组[]则不引用任何文件
56.     "types": [
57.       "webpack-env",
58.       "node"
59.     ],
61.   },
63.   "references": [
64.     {
65.       "path": "./tsconfig.config.json"
66.     }
67.   ]

复制代码

这些设置让 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 项目如虎添翼。它们就像是项目标"控制中央",通过公道设置,你可以显著提升开辟效率和代码质量。记住,设置是一个逐步优化的过程,随着项目标发展,你大概需要不停调解这些设置。保持学习和探索的态度,你会发现这些设置文件蕴含的强大力大举量!

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。