vue-cli配置灵活流程详解

基于vue-cli，配置手游的lib-flexible rem，实现移动终端自适应

安装灵活

Npm安装库-灵活-保存引入了灵活

在项目入口文件main.js中添加以下代码并引入灵活的

将“lib-flexible”px导入rem

使用webpack的px2rem-loader自动将px转换为rem

安装px2 rem-装载机

NPM安装px2rem加载程序-保存-开发配置PX2REM加载程序

在vue-cli生成的文件中，找到以下文件build/utils.js，并添加如下所示的配置

如果您需要配置导入加载器，请参考底部的说明。

Px2rem用法

安装px2rem后使用px2rem有一些不同。可以参考PX2REM的官方介绍。以下是简要介绍。

直接写px，编译后会直接转换成rem除了下面两种情况，其他长度在px后面加/*no*/就不会转换px，会按原样输出。-一般边框需要在px后面加上/*px*/会根据不同的dpr生成三组代码。-一般字体需要此示例代码

编译前(自编代码)。选择器{ width: 150pxheight: 64px/* px */font-size : 28px；/*px*/border: 1px固体# ddd/*no*/}编译后(打包代码)。选择器{ width: 2remborder: 1px固体# ddd}[data-dpr='1']。选择器{ height: 32pxfont-size : 14px；}[data-dpr='2']。选择器{ height: 64pxfont-size : 28px；}[data-dpr='3']。选择器{ height: 96pxfont-size : 42px；}重新启动项目，可以愉快地在设计稿中使用px。

注意：坑

您不能将带有名称视口的元标签添加到index.html的头部。灵活会自动为我们添加它！

向外引入css，px2rem可以转换rem吗

在实际应用中发现，有时px2rem可以正常转换，有时不能转换。原因是什么？测试了三种不同的css引入情况，发现第一种可以正常转换，第二种不能正常转换。至于原因，我还是不明白，因为我的知识贫乏，所以我请上帝回答三种介绍方式的区别。

如果了解了这些方法，就不需要配置cssLoader的import loader了，因为下面的方法更容易控制外部引入的css是否需要转移到rem，而改变import loader控制不了的时候，就会强制转移。

样式src='./assets/style.css'/* pX2rem可以正常转换*//stylestyle /* px2rem不能正常转换*/@import './assets/style . CSS '；/style style/* px2xrem无法正常转换*/@ importurl('./assets/style . CSS ')；/style以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。