首先附上coderwhy老師vue學(xué)習(xí)視頻 B站視頻
- 安裝postcss-px-to-viewport
npm install postcss-px-to-viewport --save-dev
- 下面代碼復(fù)制到vue.config.js
module.exports = {
configureWebpack: {
resolve: {
extensions: [],
alias: {
// @ 代表的是'src'
'assets': '@/assets',
'common': '@/common',
'components': '@/components',
'network': '@/network',
'views': '@/views',
}
}
},
css: {
loaderOptions: {
postcss: {
plugins: [
// autoprefixer(),
require("postcss-px-to-viewport")({
viewportWidth: 374, // 視窗的寬度，對應(yīng)的是我們設(shè)計稿的寬度，一般是750
viewportHeight: 667, // 視窗的高度茎芭，根據(jù)750設(shè)備的寬度來指定荧库，一般指定1334，也可以不配置
unitPrecision: 5, // 指定`px`轉(zhuǎn)換為視窗單位值的小數(shù)位數(shù)
viewportUnit: "vw", //指定需要轉(zhuǎn)換成的視窗單位坞笙，建議使用vw
selectorBlackList: ['.ignore'], // 指定不轉(zhuǎn)換為視窗單位的類窑多，可以自定義，可以無限添加,建議定義一至兩個通用的類名
minPixelValue: 1, // 小于或等于`1px`不轉(zhuǎn)換為視窗單位夺荒，你也可以設(shè)置為你想要的值
mediaQuery: false // 允許在媒體查詢中轉(zhuǎn)換`px`,
})
]
}
}
}
}
- 重新打包項目
npm run serve
