vue cli3+项目使用postcss-px2rem或者postcss-plugin-px2rem适配

1. 使用postcss-px2rem或者postcss-plugin-px2rem讲vue项目的px全部转换未rem适配。

2. 下载：

npm install --save postcss-px2remnpm install --save postcss-plugin-px2rem

3. 使用：在vue.config.js中

module.exports = {publicPath: process.env.NODE_ENV === 'production' ? '/online/' : '/',// outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'// outputDir: 'dist',// pages:{ type:Object,Default:undfind }runtimeCompiler: true,devServer: {port: 8888, // 端口号host: 'localhost',https: false, // https:{type:Boolean}open: false, //配置自动启动浏览器//proxy: 'http://172.20.10.9:8080', // 配置跨域处理,只有一个代理proxy: {'/auidt': {target: 'http://172.20.10.9:8080',ws: true,changeOrigin: true},}, // 配置多个代理},css: {loaderOptions: {postcss: {plugins: [// require('postcss-px2rem')({  //配置postcss-px2rem适配//     remUnit:100// })require('postcss-plugin-px2rem')({  //配置postcss-plugin-px2rem适配rootValue: 100, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。unitPrecision: 5, //允许REM单位增长到的十进制数字。//propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。// propBlackList: [], //黑名单exclude: /(node_module)/,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值// selectorBlackList: [], //要忽略并保留为px的选择器// ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。// minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0}),]}}}
}

4. 注意：

4.1 如果页面这样配置页面全部被缩放很小。需要全局设置一个css：html，body的font-size为100px或者100PX。

html,body{font-size: 100PX;
}

4.2 设置好了页面标签都需要设置宽高。或者设置display:flex。

vue cli3+项目使用postcss-px2rem或者postcss-plugin-px2rem适配相关推荐

Vue Cli3 项目 vue.config.js 配置
Vue Cli3 项目 vue.config.js 配置配置优化一.js文件最小化处理二.分割代码三.图片资源压缩四.开启gzip压缩先看一下优化配置之前的文件大小通过vue-cli3脚 ...
vue cli3 项目中解决跨域
最近项目中用到高德api,要做一个天气的模块. 做这个天气的模块,得知道用户所在得城市于是呢,我就在vue项目中获取了当前用户得ip,根据用户的ip定位了城市具体代码: vue页面: <te ...
Vue Cli3 项目打包优化
1.项目优化实现步骤: 清除生产环境中的console.log语句生成打包报告,根据报告优化项目第三方库启用CDN 路由懒加载首页内容定制 2.执行build 2.1 清除生产环境中的cons ...
vue cli3项目上限qq浏览器等出现空白兼容性错误解决方案
npm install es6-promise --save-dev npm install babel-polyfill --save-dev 都在main.js中引入 import 'babel- ...
vue前端项目基于淘宝lib-flexible做手机端适配
项目中引入lib-flexible插件 1.通过npm命令导入 1)在命令窗口进入项目目录执行:npm install lib-flexible --save 2)在项目的main.js中引入lib- ...
Vue CLI3 移动端适配【px2rem 或 postcss-plugin-px2rem】
今天,我们使用Vue CLI3 做一个移动端适配 . 前言首先确定你的项目是Vue CLI3版本以上的. 一.移动端适配包 1.安装移动端适配包 npm i lib-flexible -S 2.在m ...
可视化构建工具探索之Vue Cli3.0 阿里飞冰
Vue Cli3.0可视化构建工具--Vue UI 一.安装环境安装了最新的Vue CLI.打开Terminal,输入: npm install -g @vue/cli or yarn global ...
vue cli3 搭建项目使用vue-router 以及 element-ui
搭建vue项目,(node和git 首先要下载) 1.首先根据vue官网 Cli的说明,快速搭建. cli3上的命令应该是: vue create 项目名称(之后可以一路回车) npm run ser ...
公司项目vue cli2升级到vue cli3
背景: 公司项目历时时间较长,通过长时间的迭代,目前项目文件较多(src目录下有2217个文件),系统庞大, 之前通过vue cli2脚手架构建的项目框架,在本地开发时已经明显感觉到吃力(项目首次启动 ...

vue cli3+项目使用postcss-px2rem或者postcss-plugin-px2rem适配

vue cli3+项目使用postcss-px2rem或者postcss-plugin-px2rem适配相关推荐

最新文章

热门文章