vue@cli4 和 webpack5【实现自适应px-rem转化】
发布时间：2024-01-13 13:00
1: 项目目录结构：
![\"vue@cli4](\"https://img.it610.com/image/info8/70b3c2140ef046e6aa66f4f78568f3b8.jpg\")
![\"vue@cli4](\"https://img.it610.com/image/info8/eb35f992a9484b6e840cfe9f0d0f8d55.jpg\")
2 ：项目简单介绍
如上图可看出：该项目是由 vue@cli4 构建的，使用 webpack5 来打包的，
3： 想要实现 本地编译时 和 上线后，适配所有pc 端
步骤1： 安装2个插件：
autoprefixer : 它可以解析CSS文件并且添加浏览器前缀到CSS内容里和
postcss-pxtorem: 将px 转化为 rem
amfe-flexible：是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。
npm install --save autoprefixer postcss-pxtorem amfe-flexible
步骤2：在vue.config.js文件中进行配置
// autoprefixer: 为html、body添加font-size，窗口调整时候重新设置font-size
const autoprefixer = require(\'autoprefixer\');
// 引入等比适配插件
const px2rem = require(\'postcss-pxtorem\');
// // 配置基本大小
const postcss = px2rem({
rootValue: 192, // 设计稿的除以10得到适配范围,一般为192,设计稿为1920,最终页⾯会换算成 10rem,1rem=192px
unitPrecision: 5, // 保留rem⼩数点多少位。
propList: [\'*\'], // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
exclude: /node_modules/, // 要忽略并保留为 px 的文件路径，正则表达式或者函数都可以传。
selectorBlackList: [\'.el\'], //则是⼀个对css选择器进⾏过滤的数组，⽐如你设置为[\'fs\']，那例如fs-xl类名，⾥⾯有关px的样式将不被转换，这⾥也⽀持正则写法。
// replace: true, //（布尔值）替换包含REM的规则，而不是添加回退
// mediaQuery: false, //媒体查询( @media screen 之类的)中不⽣效
// minPixelValue: 12, //px⼩于12的不会被转换,默认 0
})
const { defineConfig } = require(\'@vue/cli-service\')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false,
publicPath:\'/\',
css: {
loaderOptions: {
postcss: {
postcssOptions: {
plugins: [autoprefixer(), postcss]
}
}
}
},
})步骤3：在main.js中引入amfe-flexible
![\"\"](\"https://img.it610.com/image/info8/f9fe7cef12894c77a66b986b30a49f97.jpg\")
步骤4： 在根目录public/index.html头部加入手机端自适应meta
使用webpack5打包时候【打包后的css转化为rem】适配配置：
步骤1：安装4个插件
postcss\": \"^8.4.14\",
\"postcss-loader\": \"^3.0.0\",
\"postcss-preset-env\": \"^7.6.0\",
\"px2rem-loader\": \"^0.1.9\",
npm install --save postcss postcss-loader postcss-preset-env px2rem-loader步骤2：配置webpac.base.config.js
{
test: /\\.css|less$/,
use : [
MiniCssExtractPlugin.loader,
// {loader:\'style-loader\'},
{loader:\'css-loader\'},
{// 兼容css, autoprefixer为css3属性添加前缀，-webkt-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;
// postcss-loader postcss-preset-env：，不写任何值，默认兼容所有浏览器
loader:\"postcss-loader\",
options:{
postcssOptions:{
ident: \"postcss\",
plugins:[
// require(\'autoprefixer\')
require(\"postcss-preset-env\")()
]
}
}
},
{
loader: \'px2rem-loader\',
options: {
remUnit: 192, // 1rem = 192px
remPrecision: 8 // px 转换为 rem 时小数点后的位数
}
},
{loader:\'less-loader\'},
// {loader:\'postcss-loader\'}
]
},
{
test: /\\.styl(us)?$/,
use: [\'style-loader\', \'css-loader\', \'postcss-loader\', \'stylus-loader\'],
},步骤3：在根目录public/index.html 中加入，根据窗口的大小给html设置等比的字体大小【 配置可伸缩布局方案】
方式1： 直接引入
1、直接引入
![\"vue@cli4](\"https://img.it610.com/image/info8/5102e2e9eb294fc994f1df5bac50cb72.jpg\")
2： 在public/index.html中引入
方式2： 直接用script标签写入
<%= htmlWebpackPlugin.options.title %>