mpvue微信小程序分包

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

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

npm install -g vue-cli

二、先用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
若是你的版本沒問題，那到這裏，一個基本的小程序項目就起起來了。

三、改造代碼目錄和配置（重點）
根據小程序 官方的教程 配置下來, 可能在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 必須爲 目錄 這個錯

四、到這裏， 重啓`npm run dev` 應該就能跑起你的項目了

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

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