vite多入口项目，使用了pxtorem，打包时exclude没有完全生效，如何解决？

Question

vite多入口项目，使用了pxtorem，打包时exclude没有完全生效，如何解决？

dispatch氢

1826

发布于
8 月 19 日河北

vite版本5.3.5，nodejs版本20.12.2，项目3个入口，默认的index.html是PC端入口，另外两个是移动端，移动端需要用pxtorem转换，PC端不转换，我通过配置exclude来判断。

打包时PC端一部分页面的样式会被转换，甚至有的对应到源码同一个vue文件中，一部分px会被转成rem，一部分还是px，但我通过在配置的exclude方法中console.log时，发现并不包含PC端的文件。

在不分项目的情况下，这个问题能否解决？如何解决？

开发模式下一切正常

vite.config.js

import { defineConfig, loadEnv } from "vite";
import path from "path";
import createVitePlugins from "./vite/plugins";
import history from "connect-history-api-fallback";
import postCssPxToRem from "postcss-pxtorem";

const includelist = ["src/largetext", "src/views/mobile", "node_modules/vant"];

export default defineConfig(({ mode, command }) => {
  return {
    plugins: [
      ...createVitePlugins(loadEnv(mode, process.cwd()), command === "build"),
      {
        name: "vite-plugin-history",
        configureServer(server) {
          server.middlewares.use(
            history({
              rewrites: [
                { from: /^\/mobile/, to: "/webview.html" },
                { from: /^\/largetext/, to: "/largetext.html" }
              ],
              htmlAcceptHeaders: ["text/html", "application/xhtml+xml"]
            })
          );
        }
      }
    ],
    resolve: {
      alias: {
        "~": path.resolve(__dirname, "./"),
        "@": path.resolve(__dirname, "./src")
      },
      extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"]
    },
    server: {
      port: 4080,
      host: true,
      open: true
    },
    css: {
      postcss: {
        plugins: [
          {
            postcssPlugin: "internal:charset-removal",
            AtRule: {
              charset: (atRule) => {
                if (atRule.name === "charset") {
                  atRule.remove();
                }
              }
            }
          },
          postCssPxToRem({
            rootValue: 37.5,
            propList: ["*"],
            exclude(file) {
              return includelist.every((path) => !file.includes(path));
            }
          })
        ]
      }
    },
    build: {
      rollupOptions: {
        input: {
          pc: path.resolve(__dirname, "index.html"),
          webview: path.resolve(__dirname, "webview.html"),
          largetext: path.resolve(__dirname, "largetext.html")
        }
      }
    }
  };
});

一开始我的nodejs版本是18.x，升到20以后打包正常了，我以为是nodejs版本问题，但第二次打包就又出现了问题，之后不断测试发现，出问题的页面是随机的。

vite postcss px2rem vue.js

阅读 1.3k

AI BotBETA

针对你描述的 Vite 项目中使用 postcss-pxtorem 时 exclude 配置未完全生效的问题，这里有几个可能的解决方案和检查点：

确保 exclude 逻辑正确：
你的 exclude 函数逻辑是检查文件路径是否不包含includelist 中的任何一项。这意味着如果文件路径与 includelist 中的任何一项都不匹配，则会被 postcss-pxtorem 处理。然而，根据你的描述，PC 端页面（默认 index.html）的样式也被处理了，这可能意味着 exclude 逻辑没有按预期工作。
尝试调整 exclude 函数，使其直接检查文件路径是否属于PC 端特有的路径（如不在 includelist 中的路径）。例如：
```
exclude(file) {
  return !includelist.some((path) => file.includes(path));
}
```

这样，只有文件路径包含 includelist 中的路径时，才会被排除在 postcss-pxtorem 之外。

检查文件路径：
确保传递给 exclude 函数的 file 路径是你期望的路径。有时候，由于构建过程中的文件路径处理，实际传入的路径可能与你的预期不符。你可以通过添加更多的 console.log 来打印出 file 的值，以查看其确切内容。
检查 Vite 和依赖库的版本：
虽然你提到升级到 Node.js 20.x 后问题有所改善，但后来又复现了。确保 Vite 和所有相关依赖库（如 postcss-pxtorem）都是最新版本，或者至少是稳定版本。
缓存和清理：
有时候，构建工具的缓存可能导致意外的行为。尝试清理 Vite 的缓存（如果 Vite 提供了这样的功能）或手动删除 .vite 缓存目录（如果它存在的话）。
检查其他插件和配置：
你的项目中还使用了其他 Vite 插件（如 createVitePlugins 返回的插件）。确保这些插件没有干扰到 postcss-pxtorem 的行为。
环境一致性：
确保你的开发环境和生产环境（或构建环境）尽可能一致，包括 Node.js 版本、npm/yarn 版本、操作系统等。不一致的环境可能会导致难以追踪的问题。
查看构建日志和错误：
仔细检查构建过程中的日志和任何可能的错误或警告信息，这些信息可能会提供关于问题原因的线索。
简化配置：
如果可能的话，尝试创建一个最小的可复现问题的示例配置，这有助于确定问题是出在配置、代码还是其他外部因素上。