1.安装配置PostCss插件npmipostcss-aspect-ratio-minipostcss-px-to-viewportpostcss-write-svgpostcss-cssnextpostcss-viewport-unitscssnano--S还需要安装cssnano-preset-advancednpmicssnano-preset-advanced--save-dev2。配置PostCss在根目录下找到.postcssrc.js，配置PostCSS插件module.exports={"plugins":{"postcss-import":{},"postcss-url":{},//编辑目标浏览器：使用package.json中的“browserslist”字段"postcss-write-svg":{uft8:false},"postcss-cssnext":{},"postcss-px-to-viewport":{viewportWidth:750,//Thewidthofwindow对应我们设计稿的宽度，一般为750viewportHeight:1334,//窗口的高度根据750设备的宽度指定，一般指定1334，也可以不配置unitPrecision:3,//指定将`px`转换为窗口单位值的小数位数（很多情况下不能整除）viewportUnit:'vw',//指定转换为的窗口单位，推荐使用vwselectorBlackList:['.ignore','.hairlines'],//指定不转换为窗口单位的类，可自定义，可无限添加，推荐d定义一个或两个常用类名minPixelValue:1,//小于或等于`1px`不转换为视口单位，也可以设置成你想要的值mediaQuery:false//允许转换`px`in媒体查询},"postcss-viewport-units":{},"cssnano":{preset:"advanced",autoprefixer:false,//和带autoprefixer的cssnext一样，保留一个"postcss-zindex":false}}}3.引入viewport-units-Buggyfill解决兼容性问题，引入js4.遇到的问题及解决img图片不显示全局导入CSS样式img{content:normal!important;}兼容第三方UI库我这里使用的是Element的Mint-UI，编译时会出现这个错误：warningin./node_modules/mint-ui/lib/style.css（发出值而不是错误实例）postcss-viewport-units:/Users/Wyj/Workspace/imglive/wx/node_modules/mint-ui/lib/style.css:267:1:'.mint-cell-allow-right::after'已经有一个'content'属性，放弃覆盖它。@./node_modules/mint-ui/lib/style。CSS4:14-11813:3-17:514:22-126@./src/plugins/mint-ui/index.js@./src/plugins/index.js@./src/main.js@multi(webpack)-dev-server/client?http://0.0.0.0:8080webpack/hot/dev-server./src/main.js可以通过修改postcss-px-to-viewport在node_modules中找到自己postcss-px-to-viewport，打开index.js添加excludeoption的处理module.exports=postcss.plugin('postcss-px-to-viewport',function(options){varopts=objectAssign({},默认值,选项);varpxReplace=createPxReplace(opts.viewportWidth,opts.minPixelValue,opts.unitPrecision,opts.viewportUnit);returnfunction(css){css.walkDecls(function(decl,i){if(options.exclude){//添加对排除选项的处理(decl.source.input.file.match(options.exclude)!==null)return;}//这应该是最快的测试并且会删除大部分声明如果（decl.value.indexOf（'px'）===-1）返回；如果（黑名单选择器（opts.selectorBlackList，decl.parent.selector））返回；decl.value=decl.value.replace(pxRegex,pxReplace);});if(opts.mediaQuery){css.walkAtRules('media',function(rule){if(rule.params.indexOf('px')===-1)return;rule.params=rule.params.replace(pxRegex,pxReplace);});}};});然后在.postcssrc.js中添加postcss-px-to-viewport排除选项“postcss-px-to-viewport”：{viewportWidth:750,viewportHeight:1334,unitPrecision:3,viewportUnit:'vw',selectorBlackList:['.ignore','.hairlines'],minPixelValue:1,mediaQuery:false,exclude:/(\/|\\)(node_modules)(\/|\\)/}，或者使用改进版的postcss-px-to-viewport-optnpminstallpostcss-px-to-viewport-opt-S并在.postcssrc.js-opt'postcss-px-to-viewport-opt'中配置postcss-px-to-viewport:{viewportWidth:375,//窗口的宽度对应我们设计稿的宽度，一般为750viewportHeight:1334,//窗口的高度，根据750设备来指定宽度，一般指定1334、也可以不配置unitPrecision:3,//指定从`px`转换为窗口单位值的小数位数（很多情况下不能整除）viewportUnit:'vw',//指定需要转换的窗口单位，推荐使用vwselectorBlackList:['.ignore','.hairlines'],//指定不转换为窗口单位的类，可以自定义，可以无限添加，它建议定义一两个通用类名minPixelValue:1,//小于或等于`1px`不转换为视口单位，也可以设置成你想要的值mediaQuery:false,//允许转换`px`inmediaqueriesexclude:/(\/|\\)(node_modules)(\/|\\)/},5.参考资料vue+tsmobilevw适配（第三方库css问题）再说移动端页面适配Vue项目中如何使用vw实现移动端适配原文地址：Vue.js移动端适配的vw解决方案
