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
      // }  
    }
  }
})