基于vue-cli5 微应用插件

介绍：单应用多页面\单页面插件，意思就是一个项目可以有多个页面，每个页面都是一个独立的微应用，每个微应用都有自己的入口文件，入口文件可以是js，也可以是vue，也可以是html，只要是入口文件存在就认为是微应用。剩下的可以自己看demo理解吧。注意文件目录格式一定要一致，不然会报错。

特点：

1. 单应用多页面
2. 单页面插件
3. 单页面插件，意思就是一个项目可以有多个

vue-cli-plugin-ddky-micro-app 目录结构

• pages
  • web// 单个页面
    • index.js // 单个页面判断依据，只要是app1/index.js 入口文件存在就认为是单个页面
    • index.html
    • index.vue
  • app // 多个页面
    • index // 乐意是啥是啥，单页多页都行
      • index.js // 不可更改
      • index.html // 页面独有的模板
      • index.vue
    • mine // 乐意是啥是啥，单页多页都行
      • index.js // 不可更改
      • 其他
    • index.html // 公共模板 比如page-1自己没有，就用这个公共的

安装使用

npm i vue-cli-plugin-micro-app -D

yarn add vue-cli-plugin-micro-app

// vue invoke vue-cli-plugin-micro-app

// npm run sever app-2

// npm run build app-2

插件配置项

// vue.config.js 
// 插件配置项
    const config = {
        pluginOptions: {
            microApp: {
              // url-loader 配置项 ******** 废弃 ********
              // urlLoaderOpts: {
              //   limit: 12440, // 默认值 ： 12440 参考
              //   // publicPath: process.env.VUE_APP_NODE_ENV !== 'production' ? '/img' : 'https://img.xx.com/images/'
              //   publicPath: '../', // cdn环境下 https://img.xx.com/images/mobile/工程名字
              //   outputPath: '../', // 图片放置的位置，相对 dist/pageName下，默认值是'../'，也就是放在 dist/img下
              // },
              pagesPath:'src/pages', // 默认值，一般不需要改
              pagesList:['pageA','pageB'] // 多页面时，打包的页面列表 (appName)=>string[] || string[],一般是指 pages/pageName/pageA，pages/pageName/pageB ……
            }
        }
    }

环境变量

process.env.VUE_APP_MICRO_APP_NAME = pageName; // 添加环境变量, pageName = 输入的项目名称

** 约定的内容 **

• 微应用位于 src/(pages/views)/ 下，插件自动检索该目录下的 pageName
• 公共模板位于 ./src/common/*.html 用于配置index.html头部信息等 使用<%= htmlWebpackPlugin.options.header %>注入，eg:app/index.html
• 默认输出位置 除图片之外的静态资源放在 dist/pageName文件夹，图片类放在 dist/img下文件名不带hash
• src/pages/pageName 下要至少存在 index.html(html-plugin使用)、index.js(webpack entry 入口)，这俩文件名字一般没必要更改