本文详细介绍了如何在使用Vue CLI创建的Vue项目中配置flexible.js以及px2rem-loader，以便实现移动端的自适应布局。以下是根据提供的文件内容总结出的知识点：
1. **flexible.js的介绍与作用**
flexible.js是一个轻量级的移动端适配解决方案。通过动态设置HTML文档的font-size值，使得1px可以根据不同设备的屏幕分辨率渲染成不同的物理尺寸，从而达到移动端设备的视觉一致性。
2. **使用Vue CLI安装lib-flexible**
在Vue项目中，首先需要安装lib-flexible库，可以通过npm或者yarn来安装。安装成功后，需要在项目的入口文件main.js中引入该库，以便在项目启动时，首先设置好HTML文档的font-size基准值。
3. **引入px2rem-loader**
为了将项目中的px单位自动转换成rem单位，需要使用webpack的px2rem-loader。通过npm安装px2rem-loader后，需要对webpack的配置文件进行修改，通常是配置文件中的build/utils.js文件，添加px2rem-loader的相关配置。这里需要特别注意importLoaders的配置项，其作用是告知webpack在处理当前文件的Loader之前，还需要额外使用多少个Loader来处理。
4. **px2rem的使用和注意点**
安装px2rem-loader后，需要正确地使用px来书写样式。但是有特定的规则：
- 直接写px，编译后会转换成rem单位。
- 在px后面添加/*no*/，编译时不会转换px，会原样输出。
- 在px后面添加/*px*/，会根据设备像素比（DPR）的不同，生成三套代码，适用于字体大小等需要根据设备屏幕做不同适配的场景。
5. **外部引入CSS文件的处理**
在实际项目中，可能会引入外部的CSS文件，px2rem-loader对这些外部引入的CSS文件的处理效果不是始终如一。文章提到了三种不同的CSS引入方式，分别是直接通过<style>标签引入、通过@import引入和通过@importurl()引入。前一种能够正常转换，而后两种则有时候无法转换。这一点对于需要精确控制样式转换的开发者来说，是一个值得注意的“坑”。
6. **项目的实际操作细节**
在编译打包项目后，会生成不同DPR的代码块，以适应不同设备的屏幕。例如，上述示例代码编译后，将会生成针对dpr为1、2、3的媒体查询代码块，以确保在不同设备上具有不同的字体大小和元素尺寸。
7. **项目配置的注意与警告**
文档特别提醒，在index.html中不能添加包含name为viewport的meta标签，因为flexible.js会自动添加所需的viewport设置。此外，也提到在引入外部CSS时，px2rem-loader可能不会正常工作的问题，并且指出了解决此问题的一种方法是通过在样式标签中添加特定注释。
以上内容是根据所提供的文件信息整理出来的知识点，这些知识点不仅详细介绍了flexible.js的使用过程，还涵盖了与之配合的px2rem-loader的配置方法。对于开发者来说，这些内容可以极大地帮助他们理解如何在Vue CLI项目中实现移动端的适配和响应式设计，从而提高项目的兼容性和用户体验。
