基于Vue-cli和Vux的webpack配置

基于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