既然使用vite那就使用vue3.x,既然使用vue3.x那就使用ts,要不完全没必要升级技术,vue2.x也挺香的,所以给自己定个要求吧

    1. import { resolve } from "path";
    2. import { UserConfigExport, ConfigEnv } from "vite";
    3. import vue from "@vitejs/plugin-vue";
    4. import vueJsx from "@vitejs/plugin-vue-jsx";
    5. import { loadEnv } from "./build/utils";
    6. import { createProxy } from "./build/proxy";
    7. import { viteMockServe } from "vite-plugin-mock";
    8. import styleImport from "vite-plugin-style-import";
    10. const pathResolve = (dir: string): any => {
    11.   return resolve(__dirname, ".", dir);
    12. };
    14. const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_OPEN } = loadEnv();
    16. const alias: Record<string, string> = {
    17.   "/@": pathResolve("src"),
    18.   "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js", //解决警告You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.
    19. };
    21. const root: string = process.cwd();
    23. export default ({ command }: ConfigEnv): UserConfigExport => {
    24.   let prodMock = true;
    25.   return {
    26.     /**
    27.      * 基本公共路径
    28.      * /manages/ 可根据项目部署域名的后缀自行填写（全局搜/manages/替换）
    29.      * @default '/'
    30.      */
    31.     base:
    32.       process.env.NODE_ENV === "production" ? "/manages/" : VITE_PUBLIC_PATH,
    33.     root,
    34.     resolve: {
    35.       alias,
    36.     },
    37.     // 服务端渲染
    38.     server: {
    39.       // 是否开启 https
    40.       https: false,
    41.       /**
    42.        * 端口号
    43.        * @default 3000
    44.        */
    45.       port: VITE_PORT,
    46.       // 本地跨域代理
    47.       proxy: createProxy(VITE_PROXY),
    48.     },
    49.     plugins: [
    50.       vue(),
    51.       vueJsx(),
    52.       styleImport({
    53.         libs: [
    54.           // 按需加载element-plus
    55.           {
    56.             libraryName: "element-plus",
    57.             esModule: true,
    58.             ensureStyleFile: true,
    59.             resolveStyle: (name) => {
    60.               return `element-plus/lib/theme-chalk/${name}.css`;
    61.             },
    62.             resolveComponent: (name) => {
    63.               return `element-plus/lib/${name}`;
    64.             },
    65.           },
    66.           // 按需加载vxe-table
    67.           {
    68.             libraryName: "vxe-table",
    69.             esModule: true,
    70.             resolveComponent: (name) => `vxe-table/es/${name}`,
    71.             resolveStyle: (name) => `vxe-table/es/${name}/style.css`,
    72.           },
    73.         ],
    74.       }),
    75.       viteMockServe({
    76.         mockPath: "mock",
    77.         localEnabled: command === "serve",
    78.         prodEnabled: command !== "serve" && prodMock,
    79.         injectCode: `
    80.           import { setupProdMockServer } from './mockProdServer';
    81.           setupProdMockServer();
    82.         `,
    83.         logger: true,
    84.       }),
    85.     ],
    86.     optimizeDeps: {
    87.       include: [
    88.         "element-plus/lib/locale/lang/zh-cn",
    89.         "element-plus/lib/locale/lang/en",
    90.       ],
    91.     },
    92.     build: {
    93.       brotliSize: false,
    94.       // 消除打包大小超过500kb警告
    95.       chunkSizeWarningLimit: 2000,
    96.     },
    97.     define: {
    98.       __INTLIFY_PROD_DEVTOOLS__: false,
    99.     },
    100.   };
    101. };