移动端适配最终版本

秒速五厘米 2023-07-12 09:15 73阅读 0赞

## lib-flexible 插件实现 ##

## 1.安装插件 ##

npm i lib-flexible --save        // 载lib-flexible
    npm install px2rem-loader        // 安装px2rem-loader
    npm i px2rem-loader --save-dev

## 2、在main.js中引入lib-flexible ##

import 'lib-flexible/flexible'

## 3、在 index.html 中添加：移动适配 meta标签 ##

## \#\# 4、更改配置 ##

在 build/util.js 中 按如下两更改  
（1）、将px2rem-loader添加到cssLoaders中

const cssLoader = { 
        loader: 'css-loader',
        options: { 
          minimize: process.env.NODE_ENV === 'production',
          sourceMap: options.sourceMap
        }
      }
      const px2remLoader = { 
        loader: 'px2rem-loader',
        options: { 
          //一般设置75
          remUnit: 35
        }
      }

（2）、在generateLoaders方法中添加px2remLoader

function generateLoaders(loader, loaderOptions) { 
        const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
    
        if (loader) { 
          loaders.push({ 
            loader: loader + '-loader',
            options: Object.assign({ }, loaderOptions, { 
              sourceMap: options.sourceMap
            })
          })
        }
    
        // Extract CSS when that option is specified
        // (which is the case during production build)
        if (options.extract) { 
          return ExtractTextPlugin.extract({ 
            use: loaders,
            fallback: 'vue-style-loader'
          })
        } else { 
          return ['vue-style-loader'].concat(loaders)
        }
      }

总结要修改的地方  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Byb2dyYW1tZXJ3aGl0ZQ_size_16_color_FFFFFF_t_70]  
重启 `npm run dev`

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Byb2dyYW1tZXJ3aGl0ZQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200308094757945.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Byb2dyYW1tZXJ3aGl0ZQ==,size_16,color_FFFFFF,t_70