鹅鹅鹅鹅
鹅鹅鹅鹅
  • 发布:2021-09-22 19:26
  • 更新:2024-02-18 14:46
  • 阅读:15797

引用超级全局组件方案

分类:uni-app

vue-inset-loader

编译阶段在sfc模板指定位置插入自定义内容,适用于webpack构建的vue应用,常用于小程序需要全局引入组件的场景。(由于小程序没有开放根标签,没有办法在根标签下追加全局标签,所以要使用组件必须在当前页面引入组件标签)

github:https://github.com/1977474741/vue-inset-loader
用得上顺便点个star

第一步 安装

npm install vue-inset-loader --save-dev  

第二步 vue.config.js注入loader

module: {  
    rules: [  
      {  
        test: /\.vue$/,  
        use:{  
            loader: "vue-inset-loader"  
            // // 针对Hbuilder工具创建的uni-app项目  
            // loader: path.resolve(__dirname,"./node_modules/vue-inset-loader")  
        }  
      }  
    ]  
},  
// 支持自定义pages.json文件路径  
// options: {  
//     pagesPath: path.resolve(__dirname,'./src/pages.json')  
// }  

第三步 pages.json配置文件中添加insetLoader

"insetLoader": {  
    "config":{  
        "confirm": "<BaseConfirm ref='confirm'></BaseConfirm>",  
        "abc": "<BaseAbc ref='BaseAbc'></BaseAbc>"  
    },  
    // 全局配置  
    "label":["confirm"],  
    "rootEle":"div"  
},  
"pages": [  
    {  
        "path": "pages/tabbar/index/index",  
        "style": {  
            "navigationBarTitleText": "测试页面",  
            // 单独配置,用法跟全局配置一致,优先级高于全局  
            "label": ["confirm","abc"],  
            "rootEle":"div"  
        }  
    },  
]  

配置说明

  • config (default: {})
    定义标签名称和内容的键值对
  • label(default: [])
    需要全局引入的标签,打包后会在所有页面引入此标签
  • rootEle(default: "div")
    根元素的标签类型,缺省值为div,支持正则,比如匹配任意标签 ".*"

    labelrootEle 支持在单独页面的style里配置,优先级高于全局配置

11 关注 分享
木杉丶 期许_ snakelzero 霍霍 1***@qq.com 3***@qq.com 3***@qq.com px15229 DCloud_UNI_HRK 正月的阳光 x***@163.com

要回复文章请先登录注册

9***@qq.com

9***@qq.com

回复 9***@qq.com :
解决了,是版本兼容问题
2024-02-18 14:46
9***@qq.com

9***@qq.com

回复 x***@163.com :
兄弟,用这个报错 Cannot read properties of undefined (reading 'start') 能咋搞嘞
2024-02-12 10:22
鹅鹅鹅鹅

鹅鹅鹅鹅 (作者)

回复 柠檬丶 :
拿掉就不报错是吧?拿掉没事的话应该是loader顺序的问题,把它放tsloader的后面
2024-02-04 10:53
柠檬丶

柠檬丶

回复 x***@163.com :
generateHtmlCode 方法丢失 打包时候出现错误 [plugin:uni:mp-using-component] This experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript". (2:8)
如何处理
2024-02-04 10:47
x***@163.com

x***@163.com

回复 x***@163.com :
https://github.com/smartXJ/vue3-inset-loader
2024-01-31 09:50
x***@163.com

x***@163.com

回复 x***@163.com :
我已经改好了一个vite版本
2024-01-30 16:57
x***@163.com

x***@163.com

回复 l***@126.com :
有vue3+vite的方案吗?
2024-01-30 14:37
l***@126.com

l***@126.com

分享一下如何兼容app端呢? 请需要的同学自取

找到了方案 node_modules/vue-inset-loader/index.js,去掉微信的判断条件:

function init(that){
// const isWx = process.env.VUE_APP_PLATFORM == 'mp-weixin'
// 首次需要对pages配置文件做解析,并判断是否为有效配置
// 非小程序环境或无效配置不予处理
needHandle = initPages(that)
// 转换为路由和配置的映射对象
needHandle && (pagesMap = getPagesMap())
}
2024-01-28 22:54
正月的阳光

正月的阳光

感谢楼主的分享
2024-01-22 14:18
鹅鹅鹅鹅

鹅鹅鹅鹅 (作者)

回复 DCloud_UNI_HRK :
好!有没有什么奖励!
2024-01-17 18:02