PanoramicBallControl360/vite.config.js

import { resolve } from "path";
import { defineConfig } from "vite";
// import minipic from "vite-plugin-minipic";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import Icons from "unplugin-icons/vite";
// import IconsResolver from 'unplugin-icons/resolver'
// import viteCompression from 'vite-plugin-compression'
import basicSsl from "@vitejs/plugin-basic-ssl";
import deletePlugin from "rollup-plugin-delete";
import Unocss from "unocss/vite";
import minipic from "vite-plugin-imagemin";
import vitePluginStyleVwLoader from "vite-plugin-style-vw-loader";
import { VantResolver } from "@vant/auto-import-resolver";
// import { visualizer } from 'rollup-plugin-visualizer'

const outDir = `bkq360-dist2.0.1.build${new Date().getFullYear()}${new Date().getMonth() + 1}${new Date().getDate()}`;
// https://vitejs.dev/config/
export default ({ mode }) => {
  // const env = loadEnv(mode, process.cwd())
  return defineConfig({
    base: "/foreground/",
    build: {
      outDir,
      sourcemap: false,
      minify: true,
      emptyOutDir: true,
      rollupOptions: {
        output: {
          chunkFileNames: "js/[hash].js",
          entryFileNames: "js/[hash].js",
          assetFileNames: (assetsFile) => {
            if (/\.(vue|scss)$/i.test(assetsFile.name)) {
              return "del/[name]-[hash].[ext]";
            } else {
              return "static/[hash].[ext]";
            }
          },
        },
      },
    },
    plugins: [
      vitePluginStyleVwLoader({
        unitToConvert: "px",
        viewportWidth: 1600,
        unitPrecision: 5,
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        minPixelValue: 1,
      }),
      vue(),
      vueJsx(),
      basicSsl(),
      Unocss(),
      AutoImport({
        imports: [
          "vue",
          "vue-router",
          "pinia",
          "@vueuse/core",
          {
            "@/api": ["useRequest"],
          },
          {
            "@/locales": ["useI18n", "locale"],
          },
        ],

        eslintrc: {
          enabled: false, // Default `false`
          filepath: "./.eslintrc-auto-import.json", // Default `./.eslintrc-auto-import.json`
          globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
        },
        resolvers: [VantResolver()],
      }),
      Components({
        dirs: ["src/components"],
        dts: false,
        resolvers: [
          VantResolver(),
          // IconsResolver({
          //   prefix: "i",
          //   alias: {
          //     system: "system-uicons",
          //   },
          // }),
        ],
        include: [/\.vue$/, /\.vue\?vue/, /\.jsx$/],
      }),
      Icons({
        compiler: "vue3",
      }),
      deletePlugin({
        targets: [`${outDir}/del`],
        hook: "writeBundle",
      }),
      // visualizer({
      //   emitFile: false,
      //   file: 'stats.html',
      //   open: true
      // }),
      // IconsResolver({
      //   prefix: 'i',
      //   alias: {
      //     system: 'system-uicons'
      //   }
      // }),
      minipic({
        /** 无损压缩配置，无损压缩下图片质量不会变差 */
        optipng: {
          optimizationLevel: 7, // 选择 0 到 7 之间的优化级别
        },
        /** 有损压缩配置，有损压缩下图片质量可能会变差 */
        pngquant: {
          quality: [0.8, 0.9], // 压缩质量
          speed: 4, // 压缩速度，范围 0~11
        },
        gifsicle: {
          optimizationLevel: 7,
          interlaced: false,
        },
        mozjpeg: {
          quality: 85, // 压缩质量
        },

        svgo: {
          plugins: [
            { name: "removeViewBox" },
            { name: "removeEmptyAttrs", active: false },
          ],
        },

        /** 是否禁用 */
        disable: false,
        /** 是否在控制台输出压缩结果 */
        verbose: true,
      }),
    ],
    resolve: {
      alias: {
        "@": resolve(__dirname, "src"),
        "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js",
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          api: 'modern-compiler',
          //忽略警告提示
          silenceDeprecations: ['legacy-js-api', 'import']
        }
      }
    },
    define: {
      __DEV__: mode === "development",
      __TEST__: mode === "test",
    },
    // server:{
    //   proxy:{
    //     '/alarm':{
    //       target: 'https://127.0.0.1',
    //       changeOrigin: true,
    //       rewrite: (path) => path.replace(/^api/, ''),
    //     }
    //   }
    // }
  });
};