vue3.0移动端将px转换为rem

• 第一种方法：我们可以将写的rem的js直接写在public文件夹下的index.html文件的头部，记得要加移动端头部的meta标签

• 第二种方法：就是将rem的js放在public文件夹下创建一个，在main.js中引入，也可以使用

• 第三种方法：参考链接https://blog.csdn.net/m0_46242315/article/details/104138421?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.opensearch_close&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.opensearch_close

• 下载插件进行配置就可以了

cnpm install amfe-flexible -S
cnpm install postcss-pxtorem -D

• 在main.js中进行引入

//移动端rem适配
import 'amfe-flexible/index' 

• 记得移动端页面要在index.html中加入meta标签

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

• 在项目的根目录下创建一个vue.config.js文件

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({ // 把px单位换算成rem单位
                        rootValue: 75, // 换算的基数(设计图750的根字体为75)
                        // selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
                        propList: ['*']//*代表将项目中的全部进行转换，单个转换如width、height等
                    })
                ]
            }
        }
    },
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
        } else {
            // 为开发环境修改配置...
        }
    }
}

• 在重新启动项目就可以了，在项目中直接写px就可以，会自动的将px转换为rem的