WTF小程序之原生碰見mpvue

事情是這樣的，咱們有一個原生（wxml,wxss,js,json）寫的小程序，要加入一個新的模塊，而且時間比較緊張。因此咱們選擇了採用mpvue開發一個分包(subpackage)，加入到原生小程序中，並確保被正確加載。下面說一下踩到的坑。

目錄結構

首先說一下目錄結構，上一張圖：

上面的目錄結構中，將mpvue項目目錄跟原生小程序目錄在同一個項目根目錄下，而後經過修改webpack配置文件將build文件目錄修改到原生小程序目錄下面。而後再經過小程序的app,json的配置，將mpvue build完成的小程序頁面文件做爲主包的一個分包加載。

webpack配置

首先介紹一下webpack相關的修改,配置文件在mpvue目錄/config/index.js下，主要修改的是assetsRoot, assetsSubDirectory, assetsPublicPath三個字段,這三個字段決定了當你執行npm run build命令時，文件的生成路徑，這裏經過修改這些路徑，使生成的文件不在mpvue項目目錄下，而在小程序的目錄下：

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../../dist/register'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/register',
    // ...
  },
  dev: {
    env: require('./dev.env'),
    port: 8080,
    // 在小程序開發者工具中不須要自動打開瀏覽器
    autoOpenBrowser: false,
    productionSourceMap: false,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/register',
    proxyTable: {},
    cssSourceMap: false
  }
}

app.json的配置

在完成上一步後，執行npm run build命令時，就會在原生小程序下面生成一個文件夾裏面是mpvue打包後的頁面文件。那麼接下來就是修改app.json的配置，從而能夠是分包中的頁面文件正確被主包加載了，配置以下:

// ...
   "subPackages": [
        {
          "root": "register/",
          "pages": [
            "pages/index/main",
            "pages/school/main",
            "pages/new-school/main"          ]
        }
    ],

這裏的root字段就是上面mpvue中的build目錄register，下面的pages是相對於root的路徑，通過以上三步，就能夠把mpvue生成的文件做爲分包加載了。若是沒有正確跑起來，報了下面的錯誤，請繼續往下看:

File not found: static/css/vendor.wxss

這是因爲 MpvuePlugin的實現沒有考慮跨目錄build形成的。可在node_modules下面找到_webpack-mpvue-asset-plugin@0.0.1@webpack-mpvue-asset-plugin下的index.js
文件，替換爲這個修改過的文件,做用就是使assetPublicPath生效。從而保證css資源引用不會出錯。[完]