skywalking-booster-ui/vite.config.ts

/**
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import type { UserConfig, ConfigEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import { loadEnv } from "vite";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import monacoEditorPlugin from "vite-plugin-monaco-editor";
import vueJsx from "@vitejs/plugin-vue-jsx";
import path from "path";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";

const OUTPUT_DIR = "dist";
const pathSrc = path.resolve(__dirname, "./src");
// https://vitejs.dev/config/
export default ({ mode }: ConfigEnv): UserConfig => {
  const { VITE_SW_PROXY_TARGET } = loadEnv(mode, process.cwd());
  return {
    plugins: [
      vue(),
      vueJsx(),
      monacoEditorPlugin({}),
      AutoImport({
        resolvers: [ElementPlusResolver()],
        dts: path.resolve(__dirname, "./src/types/auto-imports.d.ts"),
      }),
      Components({
        resolvers: [ElementPlusResolver()],
        dts: path.resolve(__dirname, "./src/types/components.d.ts"),
      }),
      createSvgIconsPlugin({
        // Specify the icon folder to be cached
        iconDirs: [path.resolve(__dirname, "./src/assets/icons")],
        // Specify symbolId format
        symbolId: "[name]",
      }),
    ],
    resolve: {
      extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
      alias: {
        "@": pathSrc,
        "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js",
      },
      preserveSymlinks: true,
    },
    css: {
      preprocessorOptions: {
        //define global scss variable
        scss: {
          additionalData: `@use "@/styles/theme.scss" as *;`,
        },
      },
    },
    server: {
      host: true,
      port: 3000,
      proxy: {
        "/graphql": {
          target: `${VITE_SW_PROXY_TARGET || "http://127.0.0.1:12800"}`,
          changeOrigin: true,
        },
      },
    },
    build: {
      target: "es2015",
      outDir: OUTPUT_DIR,
      manifest: false,
      sourcemap: false,
      chunkSizeWarningLimit: 2000,
      rollupOptions: {
        output: {
          chunkFileNames: "static/js/[name]-[hash].js",
          entryFileNames: "static/js/[name]-[hash].js",
          assetFileNames: "static/[ext]/[name]-[hash].[ext]",
          manualChunks(id) {
            if (id.includes("node_modules")) {
              if (id.includes("lodash")) {
                return "lodash";
              }
              if (id.includes("echarts")) {
                return "echarts";
              }
              if (id.includes("element-plus")) {
                return "element-plus";
              }
              if (id.includes("monaco-editor")) {
                return "monaco-editor";
              }
              if (id.includes("d3")) {
                return "d3";
              }
            }
          },
        },
      },
    },
  };
};