首先,我们需要安装相关的插件: npm install postcss-px-to-viewport -D 在vite.config.js文件中进行配置 importvuefrom'@vitejs/plugin-vue'// vite.config.tsimport{ defineConfig }from'vite'importAutoImportfrom'unplugin-auto-import/vite'importComponentsfrom'unplugin-vue-components/vite'import{ElementPlusRe...
启动Vite开发服务器,并检查生成的CSS文件,你应该会看到原来的px单位已经被转换为vw单位。 通过上述步骤,你已经成功在Vue 3+Vite项目中集成了postcss-px-to-viewport插件,并实现了px到viewport单位的自动转换。
2.在vite.config.ts中添加配置 第一种配置: import pxtovw from 'postcss-px-to-viewport'const loder_pxtovw = pxtovw({//这里是设计稿宽度 自己修改viewportWidth: 1920, viewportUnit: 'vw'})exportdefaultdefineConfig({ plugins: [vue()],css: { postcss: { plugins: [loder_pxtovw] } }}) ...
vue3使用postcss-px-to-viewport 附带vite配置 postcss-px-to-viewport做前端自适应,适用于pc和移动 注意⚠️: 1、直接在dom元素上使用 style 是不会被转换的 2、用类选择器、id选择器等才会被转换 3、element-ui、vant-ui 等UI组件库 默认会被转换 1.下载 postcss-px-to-viewport 插件 npm i postcss-...
vite.config.js配置 import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importpostcsspxtoviewport8pluginfrom'postcss-px-to-viewport-8-plugin';// https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue(),],css:{postcss:{plugins:[postcsspxtoviewport8plugin({unitToConvert:'px...
vue3+vite项目配置适配H5主要安装一下两个插件: amfe-flexible(主要用于动态设置根元素字体大小(rem),以根据屏幕尺寸进行自适应布局) postcss-px-to-viewport-8-plugin(将px单位转换为rem) 开始配置: 第一步、安装amfe-flexible插件 cnpm install amfe-flexible--save ...
javascriptpostcssvitevue3 阅读12.8k发布于2022-05-07 blank 10声望1粉丝 引用和评论 5条评论 得票最新 评论支持部分 Markdown 语法:**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。 猪猪大神: ...
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' ...
2.在vite.config.js导入 import postcssPxToViewport from 'postcss-px-to-viewport'; 1. 3.增加css配置,示例如下 return defineConfig({ plugins: [vue(), buildTimePlugin(mode)], build: { outDir: dist, }, resolve: { alias: { "@": path.resolve(__dirname, "./src"), ...
为提高页面的兼容性,可使用postcss-px-to-viewport。 1.安装依赖 "postcss-px-to-viewport":"^1.1.1" 2.在vite.config.js导入 import postcssPxToViewport from 'postcss-px-to-viewport'; 3.增加css配置,示例如下 returndefineConfig({ plugins: [vue(), buildTimePlugin(mode)], ...