mpvue微信小程序分包

## 微信小程序分包(mpvue)

使用mpvue分包示例：
1、下載vue腳手架（先有node環境，v8.12.0）

npm install -g vue-cli

2、先用vue初始化一個mpvue小程序項目(一路按步驟走下去)

vue init mpvue/mpvue-quickstart mp-fenbao
cd mp-fenbao
npm install
npm run dev

注意：這里使用的版本時 

"mpvue : v1.0.11"、
"mpvue-loader": "v1.1.2" 、
 "webpack-mpvue-asset-plugin": "^0.1.2",

如果發現版本比這個低很多，那可能你需要去看一下官方提供的手動升級方案了。官方issue
如果你的版本沒問題，那到這里，一個基本的小程序項目就起起來了。

3、改造代碼目錄和配置（重點）
根據小程序 官方的教程 配置下來, 可能在mpvue中會行不通。 因為他們的代碼目錄結構是不一樣的。尤其是mpvue是要編譯后。

琢磨了一陣之后，終於找到了正確的方案：(如圖)
mpvue分包代碼結構

• 幾個注意的點

1. 首先要把子包的目錄建在src/pages/ 下，而不是官方的平級。
2. 子包目錄下還需要建一個pages/ 的目錄，然后下面才是你的頁面目錄。
3. app.json中的配置如上圖所示就可以了

{
    "pages": [
        "pages/index/main",
        "pages/logs/main"
    ],
    "subPackages": [{
        "root": "pages/myMO/",
        "pages": [
            "counter/main"
        ]
    }],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
    }
}

 

• 根目錄的pages中，配置的是主包的頁面（一般就是你的tabbar里面的頁面）
• 分包配置 多個分包就在subPackages下建多個對象
• 最重要的一點： root對應的配置一定要是 "pages/myMO/" 。
• myMO就是你的分包名，隨便取。 最后的 / 不能省略，否則會報 subPackages[0].root 必須為 目錄 這個錯

4、到這里， 重啟`npm run dev` 應該就能跑起你的項目了

如果看到了一下圖示結果，就表示分包沒問題了。

注意： mpvue 啟動了run dev后會動態編譯，建議在調整目錄結構以后，清理dist目錄下的wx目錄並重啟npm run dev，以免舊的代碼影響。