vue.config.js webpack配置 px2rem-loader自适应处理

Bertha 。 2022-11-26 08:45 243阅读 0赞

法一：webpack配置

config.module
          .rule('svg')
          .exclude.add(resolve('src/icons'))
          .end()
        config.module
          .rule('icons')
          .test(/\.svg$/)
          .include.add(resolve('src/icons'))
          .end()
          .use('svg-sprite-loader')
          .loader('svg-sprite-loader')
          .options({
            symbolId: 'icon-[name]'
          })
          .end()
    
        // set preserveWhitespace
        config.module
          .rule('vue')
          .use('vue-loader')
          .loader('vue-loader')
          .tap(options => {
            options.compilerOptions.preserveWhitespace = true
            return options
          })
          .end()
    
        config.module
        .rule('scss')
        .oneOf('vue')
        .use('px2rem-loader')
        .loader('px2rem-loader')
        .before('postcss-loader') // this makes it work.
        .options({ remUnit: 36, remPrecision: 8 })
        .end()

法二：vue的main.js添加

// 设定body文字尺寸
    const setHtmlFontSize = () => {
      // 640 默认设计稿大小; 640px = 6.4rem ;每个元素px基础上/100
      const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
      // 得到html的Dom元素
      const htmlDom = document.getElementsByTagName('html')[0];
      // 设置根元素字体大小
      htmlDom.style.fontSize = htmlWidth / 6.4 + 'px';
    };
    window.onresize = setHtmlFontSize;
    setHtmlFontSize();

发表评论取消回复

表情：

评论列表（有 0 条评论，243人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue CLI 3 自适应解决方案 postcss-px2rem和amfe-flexible

安装postcss-px2rem cnpm i postcss-px2rem -S 配置postcss-px2rem //vue.config.js

ゝ一纸荒年。/ 2023年06月05日 08:15/ 0 赞/ 3 阅读

相关 webpack配置自定义loader

webpack配置自定义loader: 方法一：设置自定义loader模块引入路径，引入`my-loader`时去对应路径获取loader // we

朱雀/ 2023年01月16日 06:56/ 0 赞/ 160 阅读

相关 vue-cli3项目使用px2rem插件做自适应

第一步，安装插件 npm install postcss-px2rem px2rem-loader --save 第二步，在根目录src中新建util目录下新

骑猪看日落/ 2023年01月16日 02:49/ 0 赞/ 197 阅读

相关 Vue中移动端使用postcss-px2rem和lib-flexible解决自适应

前端页面移动端免不了需要自适应高度宽度字体大小等等，如果直接写rem的话那会很麻烦，前端还需要根据设计图自己去转rem写样式，那样会非常麻烦且不易维护。本文将介绍前端写px像素

超、凢脫俗/ 2022年12月09日 11:52/ 0 赞/ 363 阅读

相关 react antd-mobile lib-flexible自适应（px2rem无效的解决方法）

一、前言适应时代，接触了点typescript，正好公司做了个移动端项目，不过我用的是vue，利用一些时间，用react+typescript来重新写一个，正好样式有了

短命女/ 2022年12月01日 01:19/ 0 赞/ 269 阅读

相关 vue.config.js webpack配置 px2rem-loader自适应处理

法一：webpack配置 config.module .rule('svg') .exclude.add(resolve('s

Bertha 。/ 2022年11月26日 08:45/ 0 赞/ 244 阅读

相关 h5页面自适应移动端 px2rem

<script> resize() window.onresize = function() { res

超、凢脫俗/ 2022年10月01日 13:57/ 0 赞/ 280 阅读

相关 echarts大小自适应，width=100%实际100px的问题

1. echarts大小自适应 1. 首先要在data中定义一个为null的空值，用来保存你实例化图表的对象 data() { return {

分手后的思念是犯贱/ 2022年09月07日 12:27/ 0 赞/ 333 阅读

相关后端程序员如何使用px2rem简单实现移动端自适应html方式

作为后端程序员，前端的东西就只会一些基本的html、css、JavaScript。突然我要做一个手机上的html。需要实现响应式，适应不同分辨率的手机，这个是一个让我头大的问题

缺乏、安全感/ 2022年05月16日 06:29/ 0 赞/ 274 阅读

相关【css】css实现布局：左：200px，右：30%，中：自适应

题目来源于今日头条一面，当时想的不全，现在总结一下第一种方法：浮动布局 <style> body { padding:50

绝地灬酷狼/ 2022年04月16日 06:16/ 0 赞/ 255 阅读