vue2.0 + vant 进行移动端适配

最新推荐文章于 2023-11-01 17:28:17 发布

我的小允汐

最新推荐文章于 2023-11-01 17:28:17 发布

阅读量651

点赞数

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

本文链接：https://blog.csdn.net/nambsjks/article/details/125224469

版权

适配专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、使用淘宝适配

cnpm i postcss-px2rem -D //将代码中px自动转化成对应的rem的一个插件
cnpm i lib-flexible -S 淘宝适配

2、引入在main.js文件下

// 2. 引入淘宝适配插件
import "lib-flexible"

3、src同级下建立一个vue.config.js文件，增加以下代码

module.exports = {
  lintOnSave: false, // 不启用ESlint 规范
  publicPath:"",  // 设置打包相对路径  上线
  pwa: {
      iconPaths: {
        favicon32: 'favicon.ico',
        favicon16: 'favicon.ico',
        appleTouchIcon: 'favicon.ico',
        maskIcon: 'favicon.ico',
        msTileImage: 'favicon.ico'
      }
  },
  devServer: {
    host: '0.0.0.0', // 主机
    port: 8888,
    open: true, // 自动打开浏览器
    inline: true,  // 在线模式 
    hot: true,   // 热替换自动 更新 
    //proxy:{   // 反向代理
        // "/gateway":{
        //   target:"https://m.maizuo.com/"
        // },
        // "/wangyi":{
        //   target:"http://47.104.209.44:3333/",
        //   pathRewrite:{
        //     "^/wangyi":""  // 需要将 /wangyi 重写为 / 
        //   }
        // },
        // "/api":{
        //   target:"http://106.14.91.119:2110/",
        //   pathRewrite:{
        //     "^/api":""    
        //   }
        // }
    //} 
  },
  css: {  // 处理css 
    loaderOptions: {   // 加载器 处理样式 
      css: {},
      postcss: {   // 样式代码处理 
        plugins: [  // 插件 
          require("postcss-px2rem")({   // px => rem  
            remUnit:37.5,  // VantUI 设计稿尺寸 375 
            exclude:/node_modules/i
          })
        ]
      }
    }
  }
}

4、注释掉 index.html 头部一个标签

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">