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-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
的值,以查看其确切内容。postcss-pxtorem
)都是最新版本,或者至少是稳定版本。.vite
缓存目录(如果它存在的话)。createVitePlugins
返回的插件)。确保这些插件没有干扰到 postcss-pxtorem
的行为。通过上述步骤,你应该能够更接近问题的根源,并找到解决它的方法。
vue3、vite项目本地运行正常,打包报一堆错,应该是type-check的报错,应该怎么解决? 无
我想做一个UI组件,然后使用的是Vue3+Vite+Ts+tailwindcss 问题出现在这个静态资源这里,我的静态资源放在了src/assets下,包括图片还有style.css, 然后我使用Vite的库模式打包,并没有打包我的style.css文件,只打包了vue文件中的style标签的css,并且静态文件的图片也是没有打包,而是直接转换成了base64,对于图片多的情况下,这样页面会很卡顿
多项目打包 上一节你给你的项目定义了一个层次化的目录结构,整个项目包含一个根目录和每个模块一个子目录,这一节你将学习怎么用Gradle来构建这样一个项目结构。 首先在你的根目录新建一个build.gradle文件,创建一个空的build脚本然后运行gradle projects: $ gradle projects :projects -------------------------------
vue项目已经使用UglifyJsPlugin进行打包压缩了,上级要求项目打包之后js文件再小点,还有什么处理办法呢? 希望大佬们能给点建议,如果可以的话,有点代码支持! 拜谢!!!
vue 项目打包报错? 应该怎么调整? package.json
vite打包如何不生成vite.svg,index应用的favicon已经改为别的图标,打包还是带vite.svg,如何配置可不生成vite.svg?