uniapp分包

以下是一个完整的 Uniapp 分包示例，代码分布在不同的文件夹中，其中包含了两个子包 sub1 和 sub2，以及一个主包 main。

1. 在项目根目录下创建 pages 文件夹，并在其中创建各个页面的文件夹。

2. 在每个页面文件夹中创建对应的 vue 文件和 js 文件。

3. 在 pages.json 文件中定义各个页面和子包的信息。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/sub1/index",
      "name": "sub1",
      "subPackage": true,
      "root": "pages/sub1/",
      "pages": [
        {
          "path": "page1/page1",
          "style": {
            "navigationBarTitleText": "子包1页面1"
          }
        },
        {
          "path": "page2/page2",
          "style": {
            "navigationBarTitleText": "子包1页面2"
          }
        }
      ]
    },
    {
      "path": "pages/sub2/index",
      "name": "sub2",
      "subPackage": true,
      "root": "pages/sub2/",
      "pages": [
        {
          "path": "page1/page1",
          "style": {
            "navigationBarTitleText": "子包2页面1"
          }
        },
        {
          "path": "page2/page2",
          "style": {
            "navigationBarTitleText": "子包2页面2"
          }
        }
      ]
    }
  ]
}

1. 在项目根目录下创建 static 目录，并在其中存放项目所需的静态资源文件。

2. 在各个页面的 vue 文件中使用图片等资源时，使用相对路径或绝对路径引用即可。

<template>
  <div class="index">
    <img src="../../static/logo.png" alt="logo">
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      title: '首页',
      content: '欢迎来到 Uniapp 分包示例'
    }
  }
}
</script>
 
<style>
/* 样式 */
</style>

1. 在项目根目录下的 main.js 文件中引入 uni-pages 和 uni-page-head-com-plus 组件，并将其注册到全局。

import Vue from 'vue'
import App from './App'
import uniPages from '@/components/uni-pages/uni-pages.vue'
import uniPageHeadComPlus from '@/components/uni-page-head-com-plus/uni-page-head-com-plus.vue'
 
Vue.config.productionTip = false
 
Vue.component('uni-pages', uniPages)
Vue.component('uni-page-head-com-plus', uniPageHeadComPlus)
 
App.mpType = 'app'
 
const app = new Vue({
  ...App
})
app.$mount()

1. 通过 HBuilderX 运行项目即可看到分包效果。在调试模式下，可以通过开发者工具查看网络请求和资源加载情况。