当前位置: 首页 > 工具软件 > tovi-js > 使用案例 >

vite+postcss-px-to-viewport适配配置

百里锋
2023-12-01

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();
					}
				}
			}
		}
	}
})
 类似资料: