vue-cli配置移动端自适应

1、问题：vue开发中测试时发现适配有问题，找了一下资料，发现使用 lib-flexible 和 px2rem-loader将px转为rem；

2、安装lib-flexible：npm install lib-flexible --save

　在项目入口文件main.js引入lib-flexible

3、查看index.html中meta配置：<meta name="viewport" content="width=device-width, initial-scale=1.0">

4、安装px2rem-loader：npm install px2rem-loader --save

5、在build中utils中配置px2rem-loader：

　　（1）、定义一个变量 px2remLoader：remUnit：值对应的是设计图图宽度的十分之（根据设计图更改）

var px2remLoader = {loader: 'px2rem-loader',options: {remUnit: 37.5}}

　　（2）、在 generateLoaders 函数中更改 loaders

var loaders = [cssLoader,px2remLoader]if (loader) {loaders.push({loader: loader + '-loader',options: Object.assign({}, loaderOptions, {sourceMap: options.sourceMap})})}

6、重启就可以看到 px 转换成 rem 了

转载于:https://www.cnblogs.com/patriot/p/10114538.html

vue-cli配置移动端自适应相关推荐

Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明（Eruda、vConsole）
Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明(Eruda.vConsole) 目录 Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明(Eruda.vCons ...
vue cli配置代理解决跨域问题
内容跨域问题解决跨域问题 vue cli配置代理跨域问题是由于违背了同源策略,同源策略规定了协议名.主机名.端口号必须一致我们目前所处的位置是http localhost 8080,我们想向 ...
Vue CLI配置与安装
文章目录一.关于Vue CLI 安装Node.js 安装Vue CLI 创建Vue CLI项目启动项目停止服务重启服务二. Vue CLI项目结构关于.vue视图文件关于路由配置关于r ...
vue.cli配置选项，以防忘记，故此记录
vue-cli2和3的config不相同,vue-cli3更加简洁了而已,vue.config.js是自己根据自己的需求新建的文件,开始时是没有的. 在根目录下新建vue.config.js modu ...
基于vue-cli配置移动端自适应
配方还是一样:手淘的 lib-flexible + rem 配置 flexible 安装 lib-flexible 在命令行中运行如下安装: 1 npm i lib-flexible --save 引 ...
vue/cli 3.0 脚手架【进阶】使用 amfe-flexible 和 postcss-px2rem进行移动端适
安装vue-cli3 npm install -g @vue/cli 创建项目 vue-cli-test 脚手架-项目-成功-运行项目基于vue-cli配置移动端自适应转自:http://hj ...
Vue CLI 3 安装、创建、配置、安装插件
一.安装 1.全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它: npm uninstall vue-cli -g //或者 yarn global remove vue-cli 注 ...
vue项目通过命令行传参实现多环境配置(基于@vue/cli)
大多数项目都有生产环境和开发环境,一般情况下应该够了,但是有时候还需要sit,uat,本地等环境,这时候假如要通过注释的方式切换环境就相当麻烦了. 如果可以像下面这样切换环境就方便了 npm run ...
Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

vue-cli配置移动端自适应

vue-cli配置移动端自适应相关推荐

最新文章

热门文章