vite.config.ts的配置项(配置别名,全局将css属性单位px转化为vw,引入less,vantUI,打包压缩,代理)

javascript 复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'
import postcsspxtoviewport from 'postcss-px-to-viewport'
import styleImport, { VantResolve } from 'vite-plugin-style-import';
const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      resolves: [VantResolve()],
      libs: [
        {
          libraryName: "vant",
          esModule: true,
          resolveStyle: (name) => {
            return `../es/${name}/style/index`;
          }
        }
      ]
    }),
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ],
  resolve: {
    // 配置路径别名
    alias: { // .set('@api', resolve('src/api'))
      '@': path.resolve(__dirname, 'src'),
      '@api': path.resolve(__dirname, 'src/api'),
      '_c': path.resolve(__dirname, 'src/components'),
      '_v': path.resolve(__dirname, 'src/views')
    },
    // 忽略后缀名的配置选项
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
  },
  css: {
    postcss: {
      plugins: [
        postcsspxtoviewport({
          unitToConvert: 'px',    // 需要转换的单位,默认为"px"
          viewportWidth: 750,     // 设计稿的视窗宽度
          unitPrecision: 6,       // 单位转换后保留的精度
          propList: ['*'],        // 能转化为 vw 的属性列表 '!font-size'
          viewportUnit: 'vw',     // 希望使用的视窗单位
          fontViewportUnit: 'vw', // 字体使用的视窗单位
          selectorBlackList: ['ignore-'],  // 需要忽略的 CSS 选择器,不会转为视窗单位,使用原有的 px 等单位
          minPixelValue: 1,       // 设置最小的转换数值,如果为 1 的话,只有大于 1 的值会被转换
          mediaQuery: false,      // 媒体查询里的单位是否需要转换单位,默认为false
          replace: true,          // 是否直接更换属性值,而不添加备用属性
          exclude: [/node_modules/],     // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
          // include: /\/src\//,     // 如果设置了include,那将只有匹配到的文件才会被转换
          landscape: false,       // 是否添加根据 landscapeWidth 生成的媒体查询条件
          landscapeUnit: 'vw',    // 横屏时使用的单位
          landscapeWidth: false,   // 横屏时使用的视窗宽度1125
        })
      ]
    },
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        additionalData:  `@import "${path.resolve(__dirname, 'src/assets/css/mixin.less')}";`
      }
    }
  },
  build: {
    chunkSizeWarningLimit: 2000, // 打包后的chunks超过2M会提示警告
    minify: 'terser', // 混淆器,terser构建后文件体积更小
	  terserOptions: {
      compress: {
        drop_console: true, // 移除文件中的console
        drop_debugger: true // 移除文件的debugger
      }
    },
    rollupOptions: {
      output: {
        // 根据包名分包
        // manualChunks(id) {
        //   if (id.includes('node_modules')) {
        //     return id.toString().split('node_modules/')[1].split('/')[1].toString();
        //   }
        // },
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: '[ext]/[name]-[hash].[ext]'
      }
    }
  },
  server:  {
    port: 8091,
    proxy: {
      '/api': {
        target: 'http://test1.cn',
        changeOrigin: true
      },
      '^/web|^/h5': {
        target: 'http://test2.cn',
        changeOrigin: true
      },
      // '/mock': {
      //   target: 'http://localhost:3001',
      //   changeOrigin: true
      // }  
    }
  }
})
相关推荐
gyx_这个杀手不太冷静11 小时前
Agent开发进阶指南(第 1 章):AI Agent 到底是什么?
前端·agent·ai编程
小小小小宇11 小时前
模型相关知识
前端
小小小小宇11 小时前
模型相关知识二
前端
IT_陈寒12 小时前
Python装饰器竟然偷偷改了函数名?这个坑我爬了三天
前端·人工智能·后端
Momo__12 小时前
Vite 8.1 打包开发模式——10000 组件冷启动 15 倍,"No Bundle Dev" 七年后被自己终结
前端·vue.js·vite
YHL12 小时前
🤖 Agent 智能体开发实战 · 第一课:Tool Use —— 让大模型自动干活
前端·javascript·人工智能
Monki12 小时前
AI 规范式 UI 设计,一键批量出页,高效落地不翻车
前端
山河木马12 小时前
渲染管线-计算得到gl_FragColor(片元着色器)之后续GPU流程
前端·webgl·计算机图形学
不想说话的麋鹿13 小时前
「项目实战」我用 Codex + GPT-5.5 + Trellis "氛围编程",独立做了一个情侣厨房小程序
前端·agent·全栈
接着奏乐接着舞。14 小时前
【2026年7月最新】69道RAG面试题
前端·人工智能·后端·aigc·embedding·rag