一文读懂vite.config.ts常用配置项

rinba_murphy

已于 2023-11-10 17:29:12 修改

阅读量6.4k

点赞数 5

分类专栏： React TS 文章标签：前端 javascript es6

于 2023-11-10 17:28:04 首次发布

本文链接：https://blog.csdn.net/qq_51904231/article/details/134337777

版权

React 同时被 2 个专栏收录

11 篇文章

订阅专栏

9 篇文章

订阅专栏

本文详细解释了Vite项目中的vite.config.ts配置文件，涉及开发环境、基础路径、构建设置、服务器配置、模块解析、插件、全局变量、CSS处理和esbuild选项等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vite.config.ts 是 Vite 项目中用来配置构建选项和插件的配置文件。

defineConfig 函数是在 Vite 中用于创建配置对象的常见方法，它通常用于定义开发环境和生产环境的配置选项。以下是一些常用的配置项：

base：用于指定项目的基础路径，通常用于将项目部署到子路径的情况。
build：包含了构建相关的配置选项，比如输出路径、是否开启压缩、是否开启代码分割等。
server：用于配置开发服务器，包括主机地址、端口号、代理设置等。
resolve：用于配置模块解析规则，包括路径别名、模块文件后缀名的解析顺序等。
plugins：用于配置 Vite 插件，可以对代码进行转换、引入第三方库等。
define：用于定义全局变量，比如不同环境下的接口地址、应用名称等。
css：用于配置 CSS 相关的选项，比如预处理器、样式模块化等。
sbuild：用于配置 esbuild 相关的选项，比如自定义 JSX 配置、代码压缩优化等。

//导出一个默认的配置对象，其中包括了 Vite 的各种配置选项。
export default defineConfig({
    root, //项目根目录（index.html 文件所在的位置） 默认： process.cwd()
    base: '/', //  开发或生产环境服务的公共基础路径：默认'/'   1、绝对 URL 路径名： /foo/；  2、完整的 URL： https://foo.com/； 3、空字符串或 ./（用于开发环境）
    publicDir: resolve(__dirname, './dist'), //默认'public'  作为静态资源服务的文件夹  (打包public文件夹会没有，里面得东西会直接编译在dist文件下)
    assetsInclude: resolve(__dirname, './src/assets'), // 静态资源处理
    
    /*****配置项目的构建过程******/
    build: {
        outDir: 'dist', // 构建输出目录
        minify: true, // 是否压缩代码
        sourcemap: true, // 是否生成 source map
    },
    
    /*****定义全局变量******/
    define: {
        MENU_PATH: `"path"`,
        MENU_SHOW: `"isShowOnMenu"`,
        MENU_KEEPALIVE: `"keepAlive"`,
        MENU_KEY: `"key"`,
        MENU_ICON: `"icon"`,
        MENU_TITLE: `"title"`,
        MENU_CHILDREN: `"children"`,
        MENU_PARENTKEY: `"parentKey"`,
        MENU_ALLPATH: `"allPath"`,
        MENU_PARENTPATH: `"parentPath"`,
        MENU_LAYOUT: `'layout'`,
        __IS_THEME__: `${process.env.REACT_APP_COLOR === "1"}`,
        CUSTOMVARLESSDATA: `${JSON.stringify(customVarLessJson)}`
    },
    
    /******配置插件******/
    plugins: [
        ReactRouterGenerator({
          outputFile: resolve(".", "./src/router/auto.jsx"),
          isLazy: true,
          comKey: "components"
        }),
       react(),
    ],
    

    /******配置模块解析的规则******/
    resolve: {
      //路径使用别名
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
      //引入文件的后缀名称，可以省略。如果出现同名，按照数组加载的优先顺序
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
    },
    
    /******配置开发服务器******/
    server: {
      port: 3333,// 端口号
      open: true,// 启动时自动在浏览器打开
      https: true,// 是否开启 https
      host: true, // 监听所有地址
      cors: false, //为开发服务器配置 CORS
      fs: {
        // 可以为项目根目录的上一级提供服务
        allow: [".."],
      },
      //配置自定义代理规则
      proxy: {
          '^/api': {
                target: "https://z3web.cn",
                changeOrigin: true,
                rewrite: (path) => {
                return path.replace("/api", "/api/react-ant-admin")
            }
       },
    },
    
    /*****配置CSS相关的选项********/
    css: {
      //配置了对 SCSS 的处理选项
      preprocessorOptions: {
        scss: {
          //引入了全局的 SCSS 文件 global.scss
          additionalData: `@import "./src/assets/css/global.scss";`,
        },
      },
      // 可以查看 CSS 的源码
      devSourcemap: true
    },
    
    /****配置 esbuild 相关的选项******/
    esbuild: {
      // 自定义 JSX 配置
      jsxFactory: 'h', //自定义的 JSX 工厂函数为 h，这在一些非 React 框架中可能会用到。
      jsxFragment: 'Fragment', //指定了 JSX 的 Fragment 为 Fragment
      jsxInject: `import React from 'react'` //是否开启 JSX 转换
    }
})