在这篇文章中我们来了解一下“vue如何实现移动端自适应适配，方法是什么”，一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往下看吧！

1、vue ui创建项目

2、选择基本配置项

3、运行项目

4、新建rem.js文件

// 基准大小
const baseSize = 32
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + "px"
}
// 初始化
setRem()
// 改变窗口大小时重新设置rem
window.onresize = function () {
  setRem()
}

5、在main.js中引入

import "./utils/rem"

6、安装postcss-pxtorem 自动转换px为rem

npm install postcss-pxtorem -D

7、新建 .postcssrc.js文件

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-pxtorem": {
      "rootValue": 32,
      "propList": ["*"]
    }
  }
}

8、继续运行报错

9、新建vue.config.js文件(解决第八步报错 )

module.exports = { 
  //双击index.html文件直接运行
  publicPath: "./",
  // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录
  outputDir: "dist",
  lintOnSave: true,
  // 是否使用包含运行时编译器的 Vue 构建版本。设置true后你就可以在使用template
  runtimeCompiler: true,
  // 生产环境是否生成 sourceMap 文件 sourceMap的详解请看末尾
  productionSourceMap: false,
  configureWebpack: config => {
    if (process.env.NODE_ENV === "production") { // 为生产环境修改配置...
      return {

      }
    } else {
      return {

      }
    }
  },
  css: {
    extract: true, // 开启 CSS source maps?
    sourceMap: false, // css预设器配置项
    modules: false,
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-pxtorem")({
            rootValue: 37.5, // 换算的基数
            selectorBlackList: ["weui", "mu"], // 忽略转换正则匹配项
            propList: ["*"]
          })
        ]
      }
    }
  },

  // webpack-dev-server 相关配置
  devServer: { // 设置代理
    hot: true, // 热加载
    host: "0.0.0.0", // ip地址
    port: 8082, // 端口
    https: false, // false关闭https，true为开启
    open: true, // 自动打开浏览器
    overlay: {
      warnings: false,
      errors: false
    }
  }
}

10、自动适配完成

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• vue中常见的开发技巧你了解多少？

  这篇文章主要给大家分享的是vue中常见的开发技巧，小编觉得比较实用，对大家学习或者工作都有一定的帮助，有需要的朋友大家可以借鉴参考，接下来我们一起了解看看吧。

• vue中v-for指令怎么更新检测，具体过程是怎样

  v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。今天通过本文给大家介绍Vue中v-for更新检测的操作方法，感兴趣的朋友一起看看吧

• vue的防抖和节流是什么意思？如何理解？

  vue的防抖和节流是什么意思？一些朋友可能对防抖和节流不是很了解，对此这篇文章就给大家具体的介绍一下什么是防抖和节流，感兴趣的朋友接下来跟随小编一起学习一下吧。

• Nodejs如何现实小程序消息推送？

  如何现实小程序消息推送？这篇文章主要给大家介绍微信小程序消息推送的实现，文本代码具有一定的借鉴价值，有需要的朋友可以参考参考，下面就跟随小编一起来了解一下吧。

• JavaScript全局函有多少，怎么样应用

  本篇文章给大家带来了JavaScript中关于全局函数的相关知识，JavaScript中的全局函数有很多，下面我们一起来看一下应该怎样使用，希望对大家有帮助。