https://github.com/yulimchen/vue3-h5-template
原版寫法
vue.config.js
module.exports = {
...
css: {
loaderOptions: {
postcss: {
plugins: [
autoprefixer(),
pxtoviewport({
viewportWidth: designWidth, // 根據設計稿設定
minPixelValue: 1, // 最小的轉換數值
unitPrecision: 2, // 轉化精度，轉換后保留位數
}),
],
},
},
},
}
package.json
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
修改后
根目錄新建 postcss.config.js
const path = require("path");
module.exports = ({ webpack }) => {
const designWidth = webpack.resourcePath.includes(
path.join("node_modules", "vant")
)
? 375
: 750;
return {
plugins: {
autoprefixer: {},
"postcss-px-to-viewport": {
unitToConvert: "px",
viewportWidth: designWidth,
unitPrecision: 6,
propList: ["*"],
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: true,
exclude: [],
landscape: false,
},
},
};
};
刪除 vue.config.js 里 css 下面 postcss 那部分代碼
刪除 package.json 里 postcss 那部分代碼
注釋
// postcss.config.js
module.exports = {
plugins: {
'postcss-px-to-viewport': {
unitToConvert: "px", // 要轉化的單位
viewportWidth: 375, // UI設計稿的寬度
unitPrecision: 6, // 轉換后的精度，即小數點位數
propList: ["*"], // 指定轉換的css屬性的單位把鉴，*代表全部css屬性的單位都進行轉換
viewportUnit: "vw", // 指定需要轉換成的視窗單位，默認vw
fontViewportUnit: "vw", // 指定字體需要轉換成的視窗單位欢策，默認vw selectorBlackList: ["wrap"], // 指定不轉換為視窗單位的類名柑蛇，
minPixelValue: 1, // 默認值1，小于或等于1px則不進行轉換
mediaQuery: true, // 是否在媒體查詢的css代碼中也進行轉換篇恒，默認false
replace: true, // 是否轉換后直接更換屬性值
exclude: [/node_modules/], // 設置忽略文件宛官，用正則做目錄名匹配
}
}
}
參考：
https://www.cnblogs.com/zhangnan35/p/12682925.html
https://juejin.cn/post/7061866685166256142
https://www.freesion.com/article/720265593/
