study-ipad/vite.config.ts

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import topLevelAwait from 'vite-plugin-top-level-await'
import { resolve } from 'path'
import viteCompression from 'vite-plugin-compression' //Gzip
import { visualizer } from 'rollup-plugin-visualizer'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // 【svg-icons相关】
import VitePluginHtmlEnv from 'vite-plugin-html-env'
// @ts-ignore
import tailwindcss from '@tailwindcss/vite'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
import postcsspxtoviewport from 'postcss-px-to-viewport'

const time = new Date().getTime()
export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd())
  const { VITE_BASE } = env
  return {
    define: {
      'process.env': process.env,
    },
    plugins: [
      vue({
        template: { transformAssetUrls },
      }),
      quasar(),
      tailwindcss(),
      viteCompression(),
      VitePluginHtmlEnv(),
      visualizer(),
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [resolve(process.cwd(), 'src/assets/svg')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]',
        // svgoOptions: {
        //   plugins: [
        //     {
        //       name: 'removeAttrs',
        //       params: {
        //         attrs: ['class', 'data-name', 'fill', 'stroke']
        //       }
        //     }
        //   ]
        // }
      }),
      topLevelAwait({
        promiseExportName: '__tla',
        promiseImportName: (i) => `__tla_${i}`,
      }),
    ],
    base: '/' + VITE_BASE + '/',
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src'),
      },
    },
    // css: {
    //   postcss: {
    //     plugins: [
    //       postcsspxtoviewport({
    //         unitToConvert: 'px',
    //         viewportWidth: 1920,
    //         unitPrecision: 5, // 单位转换后保留的精度
    //         propList: ['*'], // 能转化为vw的属性列表
    //         viewportUnit: 'vw', // 希望使用的视口单位
    //         fontViewportUnit: 'vw', // 字体使用的视口单位
    //         selectorBlackList: ['ignore-'], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
    //         minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
    //         mediaQuery: true, // 媒体查询里的单位是否需要转换单位
    //         replace: true, //  是否直接更换属性值，而不添加备用属性
    //         exclude: [], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
    //         include: [], // 如果设置了include，那将只有匹配到的文件才会被转换
    //         landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
    //         landscapeUnit: 'vw', // 横屏时使用的单位
    //         landscapeWidth: 816, // 横屏时使用的视口宽度
    //       }),
    //     ],
    //   },
    // },
    server: {
      port: 9616,
      host: '0.0.0.0',
      open: true,
      strictPort: false,
      proxy: {
        [env.VITE_BASE_API_PROXY]: {
          // target: 'https://bzx.85coding.com/prod-api/',
          target: 'https://bzx.85coding.com:8083/prod-api/',
          changeOrigin: true,
          rewrite: (path) => path.replace(env.VITE_BASE_API_PROXY, ''),
        },
      },
    },
    build: {
      cssTarget: 'chrome83', // 将编译的css版本进行chrome83版本适应
      outDir: 'study-ipad',
      rollupOptions: {
        //分包优化
        output: {
          manualChunks(id) {
            if (id.includes('node_modules')) {
              return (
                time +
                id.toString().split('node_modules/')[1].split('/')[0].toString()
              )
            } else {
              return time + id.toString()
            }
          },
        },
      },
    },
    publicDir: 'src/out',
    optimizeDeps: {
      include: [],
    },
  } as any
})