vite.config.ts 配置

import { fileURLToPath, URL } from 'url'
import { loadEnv, createProxy } from "./load-env"
import { resolve } from 'path';
import { defineConfig } from 'vite'
import inject from '@rollup/plugin-inject';  // 扫描模块代码，找到需要替换的全局变量，同时通过Import注入变量
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'  // 自动导入composition api 和 生成全局typescript说明
import Components from 'unplugin-vue-components/vite'  // 组件库按需引入
import VueI18n from '@intlify/vite-plugin-vue-i18n'
import {  AntDesignVueResolver,  ElementPlusResolver,  VantResolver } from 'unplugin-vue-components/resolvers'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // svg 图标
// https://vitejs.dev/config/
export default defineConfig( ({ command, mode }) => {
  const { VITE_URL, VITE_BASE_URL, VITE_ZIP_NAME } = loadEnv(mode)
  console.log(VITE_URL, VITE_BASE_URL, VITE_ZIP_NAME);
  return {
    base:'./',
    plugins: [
      vue(),
      vueJsx(),
      // 组件库按需引入1
      AutoImport({
        // imports: [{'element-plus': ['ElMessage']}], // 自动导入vue和vue-router相关函数
        resolvers: [ElementPlusResolver({importStyle: 'css'}), VantResolver(), AntDesignVueResolver()],
        dts: "src/auto-import.d.ts" // 生成 `auto-import.d.ts` 全局声明
      }),
      //按需导入element-plus组件
      Components({
        resolvers: [
          AntDesignVueResolver(),
          ElementPlusResolver(),
          VantResolver(),
        ],
      }),
      VueI18n({
        include: resolve(__dirname, './src/lang/**'),
      }),
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [resolve(process.cwd(), 'src/icons/svg')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]',
      }),
      inject({
        exclude: '*/node_modules/element-plus/**',
        include: '**/*.*',
        modules: {
          _: 'lodash',
        }
      })
    ],
    logLevel: 'info',
    /**
     * 静态资源目录，开发模式下会自动放到 / 下，生产模式下会自动放到 outDir 根路径下。
     * 该目录可以配置为文件系统绝对目录或者相对于项目根目录的相对路径
     * */
    publicDir:'public',
    server: {
      https: false, // 是否开启 https
      open: true, // 是否自动在浏览器打开
      port: 3000, // 端口号
      hmr: true, // 开启热更新
      host: "0.0.0.0",
      proxy: createProxy(VITE_URL, VITE_BASE_URL),
      // proxy: {
      //   "/mock-api": {
      //     target: `${VITE_URL}`, // 后台接口
      //     changeOrigin: true,
      //     secure: false, // 如果是https接口，需要配置这个参数
      //     // ws: true, //websocket支持
      //     rewrite: (path) => path.replace(/^\/mock-api/, ''),
      //   }
      // }
    },
    resolve: {
      alias: {
        // "@":resolve(__dirname,"src"),
        '@': fileURLToPath(new URL('./src', import.meta.url)),
        '@comps': fileURLToPath(new URL('./src/components', import.meta.url)),
        "@images": resolve(__dirname, "src/assets/images"),
      }
    },
    css: {
      // css预处理器
      preprocessorOptions: {
        // 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了
        // 给导入的路径最后加上 ;
        // less: {
        //   modifyVars: { // 更改主题在这里
        //     'primary-color': '#52c41a',
        //     'link-color': '#1DA57A',
        //     'border-radius-base': '2px'
        //     // hack: `true; @import (reference) "${resolve('src/styles/global.less')}";`
        //   },
        //   // javascriptEnabled: true
        //   // charset: false,
        //   // additionalData: `@import "${resolve(__dirname, 'src/assets/styles/global.less')}";`,
        // },
        // mixins函数引入
        scss: {
          additionalData: `@import "@/styles/_variables.scss";\n@import "@/assets/styles/mixin.scss";\n@import "@/styles/common.scss";\n`
        }
      }
    },
    //生产模式打包配置
    build:{
      outDir: 'dist',//Specify the output directory (relative to project root).
      // 取消计算文件大小，加快打包速度
      reportCompressedSize: false,
      rollupOptions: {
      },
    }
  }
})