miniapp/config/index.js

import { defineConfig } from "@tarojs/cli";

const path = require("path");

import devConfig from "./dev";
import prodConfig from "./prod";
const url = "http://127.0.0.1:9087";

export default defineConfig(async (merge, { command, mode }) => {
  const config = {
    projectName: "civilized-miniapp",
    date: "2024-03-21",
    designWidth: 750,
    deviceRatio: {
      640: 2.34 / 2,
      750: 1,
      828: 1.81 / 2,
      375: 2 / 1,
    },

    sourceRoot: "src",
    outputRoot: "dist",
    plugins: [],
    defineConstants: {},
    copy: {
      patterns: [{ from: "src/assets/tabbar/", to: "dist/assets/tabbar/" }],
      options: {},
    },
    framework: "react",
    compiler: "webpack4",
    alias: {
      "@": path.resolve(__dirname, "..", "src"),
    },

    // mini: {
    //   postcss: {
    //     pxtransform: {
    //       enable: true,
    //       config: {},
    //     },
    //     url: {
    //       enable: true,
    //       config: {
    //         limit: 1024, // 设定转换尺寸上限
    //       },
    //     },
    //     cssModules: {
    //       enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
    //       config: {
    //         namingPattern: "module", // 转换模式，取值为 global/module
    //         generateScopedName: "[name]__[local]___[hash:base64:5]",
    //       },
    //     },
    //   },
    // },
    h5: {
      publicPath: "/",
      staticDirectory: "static",
      outputDir: "dist",
      router: {
        mode: "hash",
      },
      esnextModules: ["@antmjs/vantui"],
      miniCssExtractPluginOption: {
        ignoreOrder: true,
        filename: "css/[name].[hash].css",
        chunkFilename: "css/[id].css",
      },

      postcss: {
      
     
        pxtransform: {
          enable: true,
          config: {
            // 设置rpx转换为目标单位为rem
            unitToRem: true,
            // 设计稿宽度与 rem 基准值，默认设计稿宽度为 750，即 1rem = 75px
            designWidth: 750,
            // 可选，选择器黑名单
            selectorBlackList: [],
            // // 可选，替换rpx为其他单位后缀，例如 'px' 或 'rem'
            propList: ["*"],
            // 可选，媒体查询中是否禁用转换
            mediaQuery: false,
            // 可选，是否转换页面根节点字体大小，如body: font-size: 16px
            minPixelValue: 0,

          },
        },
        cssModules: {
          enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
          config: {
            namingPattern: "module", // 转换模式，取值为 global/module，下文详细说明
            generateScopedName: "[name]__[local]___[hash:base64:5]",
          },
        },
      },
      devServer: {
        proxy: {
          "/api": {
            target: url, // 服务端地址
            pathRewrite: {
              "^/api": "",
            },
            changeOrigin: true,
          },
        },
      },
    },
  };
  if (process.env.NODE_ENV === "development") {
    return merge({}, config, devConfig);
  }
  return merge({}, config, prodConfig);
});