vue-cli脚手架移动端适配rem

最新推荐文章于 2024-07-12 01:53:44 发布

Echo-潔

最新推荐文章于 2024-07-12 01:53:44 发布

阅读量213

点赞数

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_44094296/article/details/115130242

版权

vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何在前端项目中进行移动端适配的配置，包括下载lib-flexible和px2rem-loader这两个依赖，然后在main.js中引入lib-flexible。接着详细说明了如何在webpack的build/util.js文件中配置px2rem-loader，特别是设置remUnit为37.5，以375px设计稿为基础进行转换。这样可以确保在不同设备上保持视觉一致性。

摘要由CSDN通过智能技术生成

1、下载两个依赖

npm install lib-flexible --S

npm install px2rem-loader -S

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

import 'lib-flexible/flexible'

3、配置px2rem-loader

在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如：

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 37.5 // (以宽为375的设计稿为基准值)
    }
  }
  // generate loader string to be used with extract text plugin
  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)
    }
  }