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

最新推荐文章于 2024-06-26 10:12:51 发布

oyy_1126

最新推荐文章于 2024-06-26 10:12:51 发布

阅读量1.4k

点赞数

文章标签： postcss javascript vue.js

本文链接：https://blog.csdn.net/oyy_1126/article/details/130029383

版权

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();
					}
				}
			}
		}
	}
})