vue 移动端适配解决

最新推荐文章于 2024-01-07 10:06:03 发布

不就一个vue

最新推荐文章于 2024-01-07 10:06:03 发布

阅读量1.7k

点赞数 3

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

本文链接：https://blog.csdn.net/weixin_50259095/article/details/122185067

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. 首先把安装amfe-flexible

npm i -S amfe-flexible

npm i -S amfe-flexible

2.在入口文件main.js中引入

import 'amfe-flexible/index.js'

3.在根目录的index.html 的头部加入手机端适配的meta代码

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

4.安装postcss-pxtorem 和 postcss

npm i postcss@8.4.4 --save-dev

npm i postcss-pxtorem@5.1.1 --save-dev

注意版本号有时可能会不兼容类似于一下报错

5.根目录下创建 vue.config.js

module.exports = {
    publicPath: './', // 打包 配置这个可以先本地查看下 效果
    productionSourceMap: false, // 调试文件的功能关闭 能加快打包,
    lintOnSave: false, //关闭eslint
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        // 把px单位换算成rem单位
                        rootValue: 37.5, // 换算的基数(设计图750的根字体为75)
                        // selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
                        propList: ['*']
                    })
                ]
            }
        }
    }
}

6.这样就OK了看效果