postcss-px-to-viewport做前端自適應负蚊，適用于pc和移動
1.下載 postcss-px-to-viewport 插件
npm i postcss-px-to-viewport
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import pxtovw from 'postcss-px-to-viewport'
const loder_pxtovw = pxtovw({
//這里是設計稿寬度 自己修改
viewportWidth: 1920,
viewportUnit: 'vw'
})
export default defineConfig({
plugins: [vue()],
css: {
postcss: {
plugins: [loder_pxtovw]
}
},
resolve: {
alias: {
'@': resolve('./src')
}
},
base: './', // 打包路徑
server: {
port: 4000, // 服務端口號
open: true, // 服務啟動時是否自動打開瀏覽器
cors: true // 允許跨域
},
})
