在cli@3里使用安装插件可以适配各个移动端的适配,安装px2rem-loader和lib-flexible
在main.js里引入import ‘lib-flexible/flexible.js’;
在nodemodels里面的vue里面的cli-service里面的lib下的config文件夹下的css.js里
rule里面补充代码里的配置
rule
.use('css-loader')
.loader('css-loader')
.options(cssLoaderOptions)
rule
.use('px2rem-loader')
.loader('px2rem-loader')
.options({emUnit: 75})
if (needInlineMinification) {
rule
.use('cssnano')
.loader('postcss-loader')
.options({
sourceMap,
plugins: [require('cssnano')(cssnanoOptions)]
})
}
if (hasPostCSSConfig) {
rule
.use('postcss-loader')
.loader('postcss-loader')
.options(Object.assign({ sourceMap }, loaderOptions.postcss))
}
如图所示
.onePMap{
height: 100vh;
display: flex;
flex-direction: column;
}