vite配置

最直观的体验是“快速”、“清爽”，开发效率也得到明显提升（解决掉了webpack开发服务器存在的痛点）。

初始化完成后，工程目录如下：

VS Code插件：Vite

配置详情：

vite.config.ts

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJSX from '@vitejs/plugin-vue-jsx';
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
import { resolve } from 'path';
import { initDevProxy } from './http-proxy';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    // 自定义公共基础路径（取自 .env(.*) 文件）
    base: env.VITE_BASE_PATH,
    // 定义全局常量替换方式
    define: {
      // 取消启用Vue.2x中选项式api（这部分不会被打包）
      '__VUE_OPTIONS_API__': false,
    },
    // 配置vite插件
    plugins: [
      vue(),
      vueJSX(),
      // 自动化的组件按需引入配置
      Components({
        extensions: ['vue', 'tsx'],
        resolvers: [
          AntDesignVueResolver({ resolveIcons: true }),
        ],
        include: [/\.vue$/, /\.vue\?vue/, /\.tsx$/],
      }),
    ],
    // 配置解析项
    resolve: {
      // 路径别名
      alias: {
        '@/': resolve(__dirname, 'src') + '/',
      },
    },
    // 样式处理配置项
    css: {
      // CSS module
      modules: {
        generateScopedName: `_[name]_[local]_[hash:base64:6]_`,
      },
      // 传递给特定css样式预处理器的配置
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
        },
      },
    },
    // 配置开发服务器
    server: {
      open: true,
      proxy: initDevProxy(),
    },
    // 自定义打包项配置
    build: {
      // 大文件告警阈值(kb)
      chunkSizeWarningLimit: 400,
    },
  };
});

http-proxy.ts

import type { ProxyOptions } from 'vite';

/**
 * 初始化开发服务器代理
 */
export const initDevProxy = (): Record<string, string | ProxyOptions> => {
  return {
    // 临时示例
    '/api': {
      target: '',
      changeOrigin: true,
    },
  };
};

以上的配置是项目配置的一部分，其他所需要的配置按照自己的需要去官网查询就可以，官网基于没个配置都有详细讲解。

参考链接：

[Vite中文官网]: “https://cn.vitejs.dev/guide/ “