create-chuntianxiaozhu/template-react-h5-slider/vite.config.js

春天小猪模板工具

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import reactRefresh from "@vitejs/plugin-react-refresh";
import importToCDN from "vite-plugin-cdn-import";
import { createHtmlPlugin } from "vite-plugin-html";
import config from "./config";
import MockData from "./data";
import postcssPxToViewport from "postcss-px-to-viewport";

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      react(),
      createHtmlPlugin({
        minify: true,
        pages: [
          {
            filename: "index.html",
            template: "index.html",
            injectOptions: {
              data: {
                title: config.title,
                appName: config.appName,
                mockData:
                  mode == "development"
                    ? encodeURIComponent(JSON.stringify(MockData))
                    : null,
              },
              tags: [
                {
                  tag: "script",
                  children:
                    "window.HowlerVar = {Howl: window.Howl, Howler: window.Howler, HowlerGlobal: window.HowlerGlobal};",
                  injectTo: "head",
                },
              ],
            },
          },
        ],
      }),
      importToCDN({
        modules: [
          {
            name: "react",
            var: "React",
            path: "https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.2.0/umd/react.production.min.js",
          },
          {
            name: "react-dom",
            var: "ReactDOM",
            path: "https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.2.0/umd/react-dom.production.min.js",
          },
          {
            name: "swiper",
            var: "Swiper",
            path: "https://cdn.bootcdn.net/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js",
            css: "https://cdn.bootcdn.net/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css",
          },
          {
            name: "sweetalert",
            var: "sweetAlert",
            path: "https://cdn.bootcdn.net/ajax/libs/sweetalert/2.1.2/sweetalert.min.js",
          },
          {
            name: "howler",
            var: "HowlerVar",
            path: "https://cdn.bootcdn.net/ajax/libs/howler/2.2.3/howler.min.js",
          },
        ],
      }),
      reactRefresh(),
    ],
    css: {
      postcss: {
        plugins: [
          postcssPxToViewport({
            unitToConvert: "px",
            viewportWidth: 375,
            // viewportHeight: 389,
            unitPrecision: 3,
            viewportUnit: "vw",
            selectorBlackList: [".pageIgnore"],
            minPixelValue: 1,
            mediaQuery: false,
            propList: ["*", "!gap"],
          }),
        ],
      },
    },
    assetsInclude: ["../fonts"],
    server: {
      host: "0.0.0.0",
      fs: {
        allow: ["/Users/shzz/Desktop/projects/page"],
      },
    },
    // 调试线上环境,http://127.0.0.1:8081
    base: `https://ctxzl.gitee.io/${config.appName}`,
  };
});