mpvue中引用Vant-weapp時，沒有把原來的px轉換成rpx問題解決辦法（踩坑記錄）

mpvue中引用Vant-weapp時，沒有把原來的px轉換成rpx問題解決辦法（踩坑記錄）

 mpvue vant-weapp

由于node_modules不會編譯到dist目錄中，是以使用npm安裝的vant-weapp還需要将倉庫中的vant檔案夾複制到你的項目目錄static下，至此問題就出在放在static檔案夾中的檔案打包的時候不會被webpack打包進去，使用的時候還是會按照vant-weapp固有的px機關，如果每次引用一個元件都要修改的話太麻煩，是以也可以修改下webpack配置檔案實作編譯轉換：

修改檔案如下圖：

修改代碼為（在檔案中搜尋關鍵詞CopyWebpackPlugin）：

修改前：

new CopyWebpackPlugin([

{

from: path.resolve(__dirname, '../static'),

to: config.build.assetsSubDirectory,

ignore: ['.*']

}

])

修改後（增加一層判斷）：

var Px2rpx = require('px2rpx');

var px2rpxIns = new Px2rpx({ rpxUnit: 0.5 });

transform(content, path) {

if (path.endsWith('.wxss')) {

return px2rpxIns.generaterpx(content.toString(), 1)

} else {

return content

}

},

]),

這樣子配置就可以實作static裡面的 .wxss 檔案也會被編譯進去，就實作了轉換。