Component-placeholder-plugin NPM

component-placeholder-plugin

解决问题

uni-app在分包加载的时候无法引用其他包的组件，而在原生小程序中是支持的，原生小程序支持componentPlaceholder属性，在uni-app中打包是不支持的。因此可以通过本插件来解决。

使用方法

在根目录下创建vue.config.js文件

在vue.config.js引入插件component-placeholder-plugin

const ComponentPlaceholderPlugin = require('component-placeholder-plugin')
module.exports = {
    configureWebpack: {
        plugins: [
            new ComponentPlaceholderPlugin('/pages/businessComponents')
            // new ComponentPlaceholderPlugin(['/pages/businessComponents']) 可以写多个
        ]
    }
}

注意： ComponentPlaceholderPlugin可以传入一个分包列表，为分包组件的的根目录，不传的时候会替换所有usingsComponent与分包组件名相同的值，传则只替换与分包组件目录相同的值

在src/pages.json中新增配置项componentPlaceholder
```
"pages": [
    {
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "uni-app"
        },
        "componentPlaceholder": {
            "points-mall": "view"
        }
    }
]
```
或者放在pages.json的根目录下，与pages同级，在根目录下配置后，无需在子页面下配置componentPlaceholder。当然，子页面配置后的优先级更高，会替换根级配置的
```
{
    "pages": [],
    "componentPlaceholder": {
        ...
    }
}
```
注意： 只需在你引用组件的根目录下配置组件占位符即可，无需具体到子页面，插件会递归地分析子页面的usingsComponent配置项，发现有引用到的占位符会自动加入componentPlaceholder中。组件名为kebab-case，与编译后的usingComponents保持一致。