关于 vue 2 element-ui 适配移动端-Toy模板网

这篇具有很好参考价值的文章主要介绍了关于 vue 2 element-ui 适配移动端。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 安装 lib-flexible
npm install lib-flexible
2. 在main.js引入
import 'lib-flexible/flexible.js'
3. 安装 postcss-plugin-px2rem
npm install postcss-plugin-px2rem
4. 在 vue.config.js 文件中添加css配置（在项目根目录下，没有就新建一个vue.config.js 向外module.exports，粘贴css部分）文章来源地址https://www.toymoban.com/news/detail-517030.html

const path = require('path')

module.exports = {
  publicPath: './',
  chainWebpack: config => {
    config.module.rule('wasm').test(/\.wasm$/).type('javascript/auto')
  },
  pages: {
    // 一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)
    index: {
      // page 的入口
      entry: 'src/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'vueDemo',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    }
  },
  devServer: {
    proxy: {
      "/api": {
        // 如果需要使用正式地址测试，请将此处地址改为正式地址
        target: process.env.VUE_APP_REQUEST_URL,
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": "/"
        }
      }
    }
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, "src/css/public.less")] // 引入全局样式变量
    }
  },
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production' && process.env.VUE_APP_PROD_NO_LOG == 'true') {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    }

  },
// -----------------------------
  css: {
    loaderOptions: {
      css: {
        // options here will be passed to css-loader
      },
      postcss: {
        plugins: [
          require("postcss-plugin-px2rem")({
            rootValue: 37.5, //换算  750
            // unitPrecision: 5, //允许REM单位增长到的十进制数字。
            //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
            propBlackList: ["border"], //黑名单
            exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法。默认值为false，即该项目中所有的px均会被转换为rem
            //（以上exclude配置，如/node_modules|pc/i  排除node_modules文件夹以及所有名为pc的文件夹下的，所有文件的px转换）
            selectorBlackList: ['van-', 'el-'], //要忽略并保留为px的选择器。此处举例：van-为vant-UI组件库的前缀，el-为element-UI组件库的前缀
            // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
            // replace: true, // 替换包含REM的规则，而不是添加回退。
            mediaQuery: false, // 允许在媒体查询中转换px。
            minPixelValue: 2, //设置要替换的最小像素值(2px会被转rem)。 默认 0
          }),
        ]
      }
    }
  }
// -----------------------------
}

到了这里，关于关于 vue 2 element-ui 适配移动端的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！