基於Vue-cli和Vux的webpack配置

我還要吃四碗飯發表於2019-03-04
VueUXWeb

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

相關文章