基于Vue-cli和Vux的webpack配置

2,666 阅读3分钟

基于vue-cli配置
然后使用vux的webpack配置

npm i vue-cli -g // 如果还没安装
vue init airyland/vux2 projectPath

cd projectPath
npm i

配置目的

  1. 利用手淘flexible布局,字体需要根据dpr看来改变大小
  2. 利用postcss-px2rem自动转换页面中的rem,但是字体不转换,border利用1px方案解决也不转换
  3. 自动添加浏览器兼容前缀
  4. 利用fastclick解决点击延迟问题
  5. 安装postcss和scss还有less,不是我神经病,是引用插件和个人习惯。
  6. 转换vux的px为PX,因为weUI没有使用rem,使用的是em和px,但是又不能把它的px给转换成rem,而且vux还有一个1px.less,也不能把它的px转换成大写。但是浏览器不管px是大小写,都能按照px解析。

解决问题1

npm i lib-flexible -S

然后在main.js使用

import 'lib-flexible'

到这里只是调用,剩下的使用方法下面解决。

解决问题2

首先运行以下命令

npm i postcss-loader postcss-px2rem -D

因为问题3也是postcss的插件,所以一起解决。(如果你按照vux的webpack按照的,问题3可省略)
再安装

npm i autoprefixer -D

关于autoprefixer的配置自己查,可以查看如下文章
autoprefixer配置

然后在build的vue-loader.conf.js配置postcss

postcss: [
    require('autoprefixer')({
      browsers: ['iOS >= 7', 'Android >= 4.1']
    }),require('postcss-px2rem')({
      rootValue: 75, // 这里对应的是750的设计图尺寸
      selectorBlackList: ['html'],
      mediaQuery: true,
      propBlackList: ['border-radius','border'] // 如果要保持font-size不转换,替换为 ['font-size']
    })
  ]

这里我的配置是基于手淘布局方案的,自己可以有自己的适配方案。

然后手淘方案有字体根据dpr动态改变,所以书写CSS的时候要在后面加上注释,如下:

.selector {
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}
.selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}

因为我配置了border不转换,所以/*no*/,可以不用加,加了也不顶用。但是字体一定要使用/*px*/这个注释。这样才能根据dpr改变字体大小。chrome的移动端调试工具不支持dpr改变,所以可以手动改变dpr查看效果。

解决问题4

如果你是按照上面一步步来的,问题4已经解决了,如果不是按照来了,应该如下方法解决。
在main.js里面引入

import FastClick from 'fastclick'
FastClick.attach(document.body)

引入之前要安装,我就不写了,如果你忘了还找不到错误,真真的不适合这行。

解决问题5

这个问题不重复,难的是安装scss,用下面的方法

npm i node-sass sass-loader scss-loader -D

解决问题6

这是最难的,也是最烦的,weUI竟然没使用rem布局,用的px加em。
然后通过查找,发现有人解决方案很鸡贼,最近发现的鸡贼方案比较多,比如静音播放没有声音的音频这个粗暴解决方案有空也可以唠唠。

题外话
微信iOS收款到账语音提醒开发总结

贴具体代码吧,如果你是按照vux的webpack安装的,只需要打开webpack.base.conf.js文件,然后把最下面的module.exports修改为以下内容

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui', 'progress-bar', 'duplicate-style',{
    name: 'after-less-parser',
    fn: function (source) {
      if (this.resourcePath.replace(/\\/g, '/').indexOf('/vux/src/components') > -1) {
        source = source.replace(/px/g, 'PX')
      }
      // 自定义的全局样式大部分不需要转换
      if (this.resourcePath.replace(/\\/g, '/').indexOf('App.vue') > -1) {
        source = source.replace(/px/g, 'PX').replace(/-1PX/g, '-1px')
      }
      return source
    }
  }, {
    name: 'style-parser',
    fn: function (source) {
      if (this.resourcePath.replace(/\\/g, '/').indexOf('/vux/src/components') > -1) {
        source = source.replace(/px/g, 'PX')
      }
      // 避免转换1PX.less文件路径
      if (source.indexOf('1PX.less') > -1) {
        source = source.replace(/1PX.less/g, '1px.less')
      }
      return source
    }
  }]
})

如果不是,那就这样改,把module.exports的内容改成以上内容。

const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

参考文档

  1. vux文档
  2. npm网站
  3. 大漠的手淘布局方案flexible
  4. vux的github