1.安装postcss-px-to-viewport
npm i postcss-px-to-viewport
2.vite.config.ts更改配置 以下配置包含打包路径,分包,启动端口和postcss-px-to-viewport
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pxtovw from 'postcss-px-to-viewport'
const loder_pxtovw = pxtovw({
viewportWidth: 375,
viewportUnit: 'vw'
})
export default defineConfig({
plugins: [vue()],
css: {
postcss: {
plugins: [loder_pxtovw]
}
},
base: './', // 打包路径
server: {
port: 5173,
host: '0.0.0.0'
},
build: {
chunkSizeWarningLimit: 10000,
rollupOptions: {
output: {
manualChunks(id:any) { // 分包
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
}
}
}
})