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

npm i vue-cli -g // 如果還沒安裝 vue init airyland/vux2 projectPathcd projectPath npm i

配置目的

利用手淘flexible布局，字體需要根據dpr看來改變大小

利用postcss-px2rem自動轉換頁面中的rem，但是字體不轉換，border利用1px方案解決也不轉換

自動添加瀏覽器兼容前綴

利用fastclick解決點擊延遲問題

安裝postcss和scss還有less，不是我神經病，是引用插件和個人習慣。

轉換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 代碼賦值給變量 webpackConfigmodule.exports = vuxLoader.merge(webpackConfig, {plugins: ['vux-ui'] })

參考文檔

vux文檔

npm網站

大漠的手淘布局方案flexible

vux的github
另外：

vue+vux+es6+webpack移動端常用配置步驟

創建項目（vue項目的流程就不多講了）**

cnpm install vux --save**

在build/webpack.base.conf.js配置：

const vuxLoader = require('vux-loader') 把第一個module.exports賦值變量**let webpackConfig** ={里面代碼不動} 然后這個放在最底部去 module.exports = vuxLoader.merge(webpackConfig, {plugins: ['vux-ui', 'progress-bar', 'duplicate-style'] })

4.安裝vux-loader使用命令cnpm install vux-loader -D

5.cnpm install less less-loader --save-dev 以正確編譯less源碼

6.cnpm install yaml-loader --save-dev 以正確進行語言文件讀取

7.index.html入口頁面<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

8.main.js里面配置：
（需要安裝依賴cnpm install fastclick --save）
const FastClick = require('fastclick')
FastClick.attach(document.body) //去掉點擊延遲300秒
（需要安裝依賴cnpm install axios --save）
const axios = require('axios')
Vue.prototype.$ajax = axios;

9.index.html里面引入rem自適應布局的js，有需要用jq的也在這里引入以保證性能。

?

總結

以上是生活随笔為你收集整理的基于Vue-cli和Vux的webpack配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。