vite.config.ts配置文件

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