您当前的位置:首页 > 文章 > vite.config.ts配置

vite.config.ts配置

作者:oBoLuoMi1 时间:2024-09-27 阅读数:528 人阅读
vite.config.ts 是 Vite 项目的配置文件,用于配置构建选项和插件。以下是一个详细的配置及说明:

base:用于指定项目的基础路径,通常用于将项目部署到子路径的情况。

默认值:'/'
build:包含了构建相关的配置选项。

outDir:构建输出目录。
minify:是否压缩代码。
sourcemap:是否生成sourcemap。
server:用于配置开发服务器。

host:主机地址。
port:端口号。
proxy:代理设置。
resolve:用于配置模块解析规则。

alias:路径别名。
extensions:模块文件后缀名的解析顺序。
plugins:用于配置 Vite 插件。可以对代码进行转换、引入第三方库等。

define:用于定义全局变量。

在此可以定义一些常量,比如不同环境下的接口地址、应用名称等。
css:用于配置 CSS 相关的选项。

preprocessorOptions:预处理器选项。
importLoaders:导入加载器数量。
sbuild:用于配置 esbuild 相关的选项。

jsxFactory:JSX 工厂函数名称。
jsxFragment:JSX 片段工厂函数名称。
env:用于定义环境变量。可以在不同的环境(如开发、生产)下使用不同的设置。

rootDir:项目根目录,默认为当前工作目录。

publicDir:静态资源服务的文件夹,打包时 public 文件夹内容会被复制到 dist 文件夹下。

assetsDir:静态资源目录,编译时会被复制到 dist 文件夹下。

outputDir:编译后的文件输出目录,默认为 'dist'。

scriptPreload:预加载脚本的 URL,用于在页面加载前预加载脚本,提高页面加载速度。

buildInPlugins:构建时自动加载的插件列表,可以指定多个插件,用逗号分隔。

defineConfig:定义全局变量的配置项,可以通过在项目根目录下的 vite.config.ts 文件中进行定义和使用。例如 defineConfig({ define: { DEBUG: true } }) 会在整个项目中定义一个名为 DEBUG 的全局变量,值为 true。

serverMiddleware:开发服务器中间件配置项,可以在项目根目录下的 vite.config.ts 文件中进行定义和使用。中间件可以在请求和响应之间对数据进行处理,可以用来实现跨域请求、自定义路由等功能。

clientBuildTimeout:客户端构建超时时间,单位为毫秒,默认为 30000 毫秒(30 秒)。当客户端构建超过该时间时,会抛出错误并终止构建过程。

buildOptions:构建选项配置项,可以在项目根目录下的 vite.config.ts 文件中进行定义和使用。该配置项用于指定构建过程中的各种选项和参数,如压缩代码、生成源映射表等。

import { defineConfig, loadEnv } from 'vite'
import type { UserConfig, ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx' //tsx插件引入
import AutoImport from 'unplugin-auto-import/vite' //自动引入ref,reactive等等等
 
// 配置antd-v按需加载(可以用别的)
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
 
// import path from 'path';
import { resolve, join } from 'path'
import { wrapperEnv } from './build/utils'
 
// defineConfig 工具函数,这样不用 jsdoc 注解也可以获取类型提示
export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
 
  console.log(command, mode, '===')
  const root = process.cwd()
  const env = loadEnv(mode, root) // 环境变量对象
  console.log('环境变量------', env)
  console.log('文件路径( process.cwd())------', root)
  console.log('文件路径(dirname)------', __dirname + '/src')
  const { VITE_DROP_CONSOLE } = wrapperEnv(env)
 
  // dev 独有配置
  return {
  
    root, //项目根目录(index.html 文件所在的位置) 默认: process.cwd()

    base: '/', 
//  开发或生产环境服务的公共基础路径:默认'/'   
// 1、绝对 URL 路径名: /foo/;
// 2、完整的 URL: https://foo.com/; 3、空字符串或 ./(用于开发环境)

//注意: 设置开发者模式以及生产模式访问路径
    base: process.env.NODE_ENV === "production" ? "/线上访问路径/" : "./",

    publicDir: resolve(__dirname, './dist'), 
//默认'public'  作为静态资源服务的文件夹  (打包public文件夹会没有,里面得东西会直接编译在dist文件下)

    assetsInclude: resolve(__dirname, './src/assets'), 
// 静态资源处理

//*****定义全局变量******
    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)}`
    }, 
 
    //注意还有这一种,可根据实际需求配置
    envPrefix:  ['VITE', 'VUE'], // 环境变量前缀,默认只会暴露VITE开头变量,定义后可暴露VUE开头变量
    // 环境变量配置
    define: {
        'process.env.VUE_APP_URL':JSON.stringify(env.VUE_APP_URL),
    },
 
    // ******插件配置******
    plugins: [
      vue(),
      vueJsx(),
      AutoImport({
        imports: [
          'vue',
          'vue-router',
          'pinia',
          {
            axios: [
              ['default', 'axios'] // import { default as axios } from 'axios',
            ]
          }
        ],
        dts: 'types/auto-import.d.ts' //生成全局引入的文件
      }),
      Components({
        resolvers: [
          AntDesignVueResolver({
            importStyle: 'less' //修改antdv主题色
          })
        ]
      })
    ], 

    // ******开发服务器配置******
    server: {
      https: true, //(使用https)启用 TLS + HTTP/2。注意:当 server.proxy 选项 也被使用时,将会仅使用 TLS
      host: true, // 监听所有地址
      port: 8080, //指定开发服务器端口:默认3000
      open: true, //启动时自动在浏览器中打开
      cors: false, //为开发服务器配置 CORS
      proxy: {
        //配置自定义代理规则
        // 字符串简写写法
        '/jpi': 'http://192.168.1.97:4567',
        '/api': {
          target: 'http://192.168.1.97:108',
          changeOrigin: true, //是否跨域
          rewrite: path => path.replace(/^\/api/, '')
        }
      }
      // hmr: {
      //   overlay: false
      // }
    },

    // ******项目构建配置******
    build: {
      target: 'modules', //设置最终构建的浏览器兼容目标  //es2015(编译成es5) | modules
      outDir: 'dist', // 构建得包名  默认:dist
      assetsDir: 'assets', // 静态资源得存放路径文件名  assets
      sourcemap: false, //构建后是否生成 source map 文件
      brotliSize: false, // 启用/禁用 brotli 压缩大小报告。 禁用该功能可能会提高大型项目的构建性能
      minify: 'esbuild', // 项目压缩 :boolean | 'terser' | 'esbuild'
      chunkSizeWarningLimit: 1000, //chunk 大小警告的限制(以 kbs 为单位)默认:500
      cssTarget: 'chrome61' //防止 vite 将 rgba() 颜色转化为 #RGBA 十六进制符号的形式  (要兼容的场景是安卓微信中的 webview 时,它不支持 CSS 中的 #RGBA 十六进制颜色符号)
    },

    // ******resolver配置******
    resolve: {
      alias: {
        // 别名配置
        // 键必须以斜线开始和结束
        '@': resolve(__dirname, 'src'),
        components: resolve(__dirname, './src/components'),
        assets: resolve(__dirname, './src/assets'),
        '#': resolve(__dirname, 'types'),
        build: resolve(__dirname, 'build')
      },
  
  //引入文件的后缀名称,可以省略。如果出现同名,按照数组加载的优先顺序
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'], 
    },

    // ******打印+debugger清除配置******
    // 测试环境保留打印
    esbuild: {
      pure: VITE_DROP_CONSOLE ? ['console.log', 'debugger'] : []
  // 自定义 JSX 配置
      jsxFactory: 'h', //自定义的 JSX 工厂函数为 h,这在一些非 React 框架中可能会用到。
      jsxFragment: 'Fragment', //指定了 JSX 的 Fragment 为 Fragment
      jsxInject: `import React from 'react'` //是否开启 JSX 转换
 
    },
 
    css: {
      // 全局变量+全局引入less+配置antdv主题色
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
          // 全局变量使用:@primary-color
          modifyVars: {
            'primary-color': '#1890ff', // 全局主色
            'link-color': ' #1890ff', // 链接色
            'success-color': ' #52c41a', // 成功色
            'warning-color': ' #faad14', // 警告色
            'error-color': ' #f5222d', // 错误色
            'font-size-base': ' 14px', // 主字号
            'heading-color': ' rgba(0, 0, 0, 0.85)', // 标题色
            'text-color': ' rgba(0, 0, 0, 0.65)', // 主文本色
            'text-color-secondary': ' rgba(0, 0, 0, 0.45)', // 次文本色
            'disabled-color': ' rgba(0, 0, 0, 0.25)', // 失效色
            'border-radius-base': ' 2px', // 组件/浮层圆角
            'border-color-base': ' #d9d9d9', // 边框色
            'box-shadow-base': ' 0 2px 8px rgba(0, 0, 0, 0.15)' // 浮层阴影
          }
        }
      }
    }
  }
})
 
没有用的自己可以去掉

 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
                        
原文链接:https://blog.csdn.net/oBoLuoMi1/article/details/131008428

本站大部分文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了您的权益请来信告知我们删除。邮箱:1451803763@qq.com