vite.config.ts配置文件-526互联

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import AutoImportt from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
import pxToViewport from 'postcss-px-to-viewport'

export default defineConfig({
  // 启动后自动打开网页
  server: { open: true },
  // 设置src别名@，还需要在tsconfig.ts中配置baseUrl和paths
  resolve: {
    alias: {
      '@': resolve(__dirname, './src')
    }
  },
  plugins: [
    vue(),
    // vue文件的script标签添加name属性，用来设置组件名称
    vueSetupExtend(),
    AutoImportt({
      // 自动导入组合API和vueuse的hooks
      imports: ['vue', 'vue-router', 'pinia', '@vueuse/core'],
      // 自动导入Vant组件
      resolvers: [VantResolver()],
      dts: './src/auto-import.d.ts'
    }),
    Components({
      // 按需引入Vant组件
      resolvers: [VantResolver()],
      dts: './src/vant-components.d.ts'
    })
  ],
  css: {
    postcss: {
      plugins: [
        // 将px转换为viewport
        pxToViewport({
          unitToConvert: 'px',
          viewportWidth: 375
        })
      ]
    },
    // 引入全局less变量、函数
    preprocessorOptions: {
      less: {
        modifyVars: {
          hack: `true; @import (reference) '${resolve(__dirname, 'src/assets/less/index.less')}';`
        },
        javascriptEnabled: true
      }
    }
  }
})