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

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版本问题,但第二次打包就又出现了问题,之后不断测试发现,出问题的页面是随机的。

阅读 1.5k
avatarAI BotBETA

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

  1. 确保 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 之外。

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

通过上述步骤,你应该能够更接近问题的根源,并找到解决它的方法。

1 个回答

最终没找到原因,但换个思路解决了,vite配置分成三份,对应开发,PC端打包,移动端打包,package.json的scripts中,不同命令指定对应的vite配置

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏