vue@cli4 和 webpack5【实现自适应px-rem转化】

JIseven

已于 2022-05-31 19:22:54 修改

阅读量1.2k

点赞数 2

分类专栏：项目现成文章标签： vue.js javascript 前端 webpack

于 2022-05-31 19:20:39 首次发布

本文链接：https://blog.csdn.net/qq_37833745/article/details/125071146

版权

项目现成专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1: 项目目录结构：

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

步骤4： 在根目录public/index.html头部加入手机端自适应meta

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user

使用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、直接引入

2：在public/index.html中引入

    <script src="<%= BASE_URL %>static/amfe-flexible.js"></script>

方式2：直接用script标签写入

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script>
      let docEle = document.documentElement;
      function setRemUnit () {
        //750/10=75 375/10=37.5
        docEle.style.fontSize = docEle.clientWidth / 10 + 'px';
      }
      setRemUnit();
      window.addEventListener('resize', setRemUnit);
    </script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>