Vite的常见配置选项详细说明

出轨者千刀万剐

选项详细说明


base: 配置基础路径

1. 通常用于指定应用在生产环境中的路径前缀。

复制代码

build: 构建选项

1. outDir: 输出目录。assetsDir: 存放静态资源的目录。assetsInlineLimit: 静态资源内联限制。cssCodeSplit: 启用/禁用 CSS 代码拆分。sourcemap: 生成 sourcemap 文件。rollupOptions: Rollup 相关配置。minify: 启用/禁用压缩。可以选择 esbuild 或 terser，也可以设置为 false。chunkSizeWarningLimit: 触发警告的 chunk 大小限制。emptyOutDir: 构建前清空输出目录。manifest: 生成 manifest 文件。ssrManifest: 生成 SSR manifest 文件。target: 构建目标。

复制代码

server: 开发服务器配置

1. host: 服务器主机。port: 服务器端口。strictPort: 如果端口被占用，是否退出。https: 启用 https。open: 自动打开浏览器。proxy: 配置代理。cors: 启用 CORS。hmr: 热模块替换配置。

复制代码

preview: 预览服务器配置

类似于 server，但用于 vite preview 命令。## plugins: 配置插件。

css: CSS 相关配置

1. preprocessorOptions: CSS 预处理器选项。postcss: PostCSS 配置。

复制代码

resolve: 解析选项

1. alias: 路径别名。extensions: 自动解析扩展名。

复制代码

esbuild: ESBuild 配置

1. jsxFactory: JSX 工厂函数。jsxFragment: JSX 片段。jsxInject: 注入 JSX 工厂函数。minify: 启用/禁用压缩。

复制代码

assetsInclude: 指定静态资源文件类型


define: 定义全局常量替换


logLevel: 日志级别


envPrefix: 环境变量前缀


json: JSON 配置

1. namedExports: 启用命名导出。stringify: 启用 JSON 字符串化。

复制代码

worker: Worker 配置

1. format: Worker 格式。plugins: Worker 插件。

复制代码

这些选项覆盖了大多数 Vite 项目的常见配置需求。根据你的项目需求，可以灵活地配置这些选项。如果有更多的自定义需求，还可以参考 Vite 官方文档 了解详细的配置选项和用法。

1. import { defineConfig } from 'vite'
   
2. 
   
3. export default defineConfig({
   
4.   // 基础路径
   
5.   base: '/',
   
6.   
   
7.   // 输出目录
   
8.   build: {
   
9.     outDir: 'dist',
   
10.     assetsDir: 'assets',
    
11.     assetsInlineLimit: 4096,
    
12.     cssCodeSplit: true,
    
13.     sourcemap: false,
    
14.     rollupOptions: {
    
15.       input: 'src/main.js',
    
16.       output: {
    
17.         // 可以配置输出选项
    
18.       },
    
19.     },
    
20.     minify: 'esbuild', // 'terser' 或者 false
    
21.     chunkSizeWarningLimit: 500,
    
22.     emptyOutDir: true,
    
23.     manifest: false,
    
24.     ssrManifest: false,
    
25.     target: 'modules',
    
26.   },
    
27.   
    
28.   // 开发服务器配置
    
29.   server: {
    
30.     host: 'localhost',
    
31.     port: 3000,
    
32.     strictPort: false,
    
33.     https: false,
    
34.     open: true,
    
35.     proxy: {
    
36.       '/api': {
    
37.         target: 'http://backend.api',
    
38.         changeOrigin: true,
    
39.         rewrite: path => path.replace(/^\/api/, '')
    
40.       }
    
41.     },
    
42.     cors: true,
    
43.     hmr: true, // 热模块替换
    
44.   },
    
45.   
    
46.   // 预览服务器配置
    
47.   preview: {
    
48.     host: 'localhost',
    
49.     port: 5000,
    
50.     strictPort: false,
    
51.     https: false,
    
52.     open: true,
    
53.     cors: true,
    
54.   },
    
55.   
    
56.   // 插件
    
57.   plugins: [
    
58.     // 在这里添加插件
    
59.   ],
    
60.   
    
61.   // CSS 相关配置
    
62.   css: {
    
63.     preprocessorOptions: {
    
64.       scss: {
    
65.         additionalData: `$injectedColor: orange;`
    
66.       }
    
67.     },
    
68.     postcss: {
    
69.       plugins: [
    
70.         // PostCSS 插件
    
71.       ]
    
72.     },
    
73.   },
    
74.   
    
75.   // 解析配置
    
76.   resolve: {
    
77.     alias: {
    
78.       '@': '/src',
    
79.     },
    
80.     extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
    
81.   },
    
82.   
    
83.   // ESBuild 配置
    
84.   esbuild: {
    
85.     jsxFactory: 'h',
    
86.     jsxFragment: 'Fragment',
    
87.     jsxInject: `import React from 'react'`,
    
88.     minify: true,
    
89.   },
    
90.   
    
91.   // 静态资源处理
    
92.   assetsInclude: ['**/*.gltf'],
    
93. 
    
94.   // 定义全局常量替换
    
95.   define: {
    
96.     __APP_VERSION__: JSON.stringify('1.0.0'),
    
97.   },
    
98.   
    
99.   // 日志级别
    
100.   logLevel: 'info', // 'info', 'warn', 'error', 'silent'
     
101. 
     
102.   // 环境变量前缀
     
103.   envPrefix: 'VITE_',
     
104. 
     
105.   // JSON 配置
     
106.   json: {
     
107.     namedExports: true,
     
108.     stringify: false,
     
109.   },
     
110. 
     
111.   // Worker 配置
     
112.   worker: {
     
113.     format: 'iife',
     
114.     plugins: []
     
115.   }
     
116. })

复制代码

总结

到此这篇关于Vite的常见配置选项的文章就介绍到这了,更多相关Vite常见配置选项内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/326824wkj.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！