create-chuntianxiaozhu/template-react-h5/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,
              },
            },
          },
        ],
      }),
      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",
          },
        ],
      }),
      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"],
      },
    },
    base: `https://ctxzl.gitee.io/${config.appName}`,
  };
});