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
      // }  
    }
  }
})
相关推荐
mayaairi38 分钟前
Vue2 事件绑定完全指南:从入门到原理
前端·javascript·vue.js
ℋᙚᵐⁱᒻᵉ鲸落6 小时前
移动端滑动手势冲突:overflow: auto导致外层横向滑动失效
前端·javascript·css·vue.js·html
默_笙8 小时前
🎃 前端学了 Next.js,后端该学啥?NestJS 就是 Node 版的蜜雪冰城
前端·javascript
前端snow9 小时前
ai agent --- 实现 openclaw 定时间效果
前端
码云之上9 小时前
换模型之后,Chatbot 为什么要自己做 compact?
前端·agent·前端工程化
星栈9 小时前
自定义 UI-UX-Pro-Max 的 CSV 知识库,把 AI 生成的后台拉回行业该有的样子
前端·agent·weui
研☆香9 小时前
简单的图片上传 删除 预览
前端
ITresearchGuest10 小时前
我用 AI 一小时写了一个世界杯数据可视化平台|前端 VibeCoding 初体验
前端·人工智能·信息可视化
慧一居士11 小时前
Vite项目中使用Less步骤,详细使用示例
前端·css
花间相见11 小时前
【LangChain组件03】—— LangChain Agents 执行与状态:工作流程与状态管理实战
java·前端·langchain