vite配置vw（vue所有版本可用），代码直接写px，自动转换成vw

vue2版本也可以用，只不过我用的是vue3+版本。

借助几个插件，在vite中配置，就可以实现vw单位自动编译。

在代码中，直接写px单位，跑项目自动会编译成vw单位。

代码中写px单位：

浏览器中转换成了vw单位： 

vite配置

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import externalGlobals from 'rollup-plugin-external-globals';

const dotenv = require("dotenv");

export default defineConfig(({ command, mode }) => {
    return {
        plugins: [
            vue(),
            vueJsx({}),
        ],
        css: {
            preprocessorOptions: {
                less: {
                    sourceMap: true,
                    javascriptEnabled: true,
                    modifyVars: defaultStyle()
                }
            },
            postcss: {
                plugins: [
                    require('postcss-import'),
                    require('postcss-url'),
                    require('postcss-aspect-ratio-mini'),
                    require('postcss-write-svg')({ utf8: false }),
                    require('postcss-px-to-viewport')({
                        viewportWidth: 3440, // 视口宽度，对应设计稿宽度
                        viewporHeight: 1440, // 视口高度，对应设计稿高度
                        unitPrecision: 3, // 指定px转换之后的小数位数
                        viewportUnit: 'vw', // 转换的单位
                        fontViewportUnit: 'vw', // 字体使用的单位
                        replace: true, //  是否直接更换属性值，而不添加备用属性
                        selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换的类
                        exclude: /(\/|\\)(node_modules)(\/|\\)/, //禁止更改第三方UI框架样式
                        minPixelValue: 1, // 小于或等于1px不转换
                        mediaQuery: true, // 允许在媒体查询中转换
                    }),
                    require('cssnano')({
                        'cssnano-preset-advaced': {
                            zindex: false,
                            autoprefixer: false,
                        },
                    })
                ]
            }
        }
    }
})

package.json，安装以下插件

{
    "cssnano": "^5.1.7",
    "cssnano-preset-advanced": "^5.3.3",
    "postcss": "^8.4.13",
    "postcss-aspect-ratio-mini": "^1.1.0",
    "postcss-cssnext": "^3.1.1",
    "postcss-focus": "^5.0.1",
    "postcss-import": "^14.1.0",
    "postcss-px-to-viewport": "^1.1.1",
    "postcss-url": "^10.1.3",
    "postcss-viewport-units": "^0.1.6",
    "postcss-write-svg": "^3.0.1",
    "less": "^4.1.2",
    "less-loader": "^10.2.0",
}

各位看官，喜欢您就点个赞👍