1977474741 / vue-inset-loader

编译阶段在sfc模板指定位置插入自定义内容

vue-inset-loader

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

第一步 安装

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，支持正则，比如匹配任意标签 ".*"

✔ label 和 rootEle 支持在单独页面的style里配置，优先级高于全局配置

vue-inset-loader's Issues

按照这样的方式引入组件 $refs 对象中没有 组件

RT

请问支持vite+vue3吗

vue3项目报错，说是版本不匹配 但是我怎么更新vue-template-compiler呢？vue3好像用@vue/compiler-sfc

16:12:14.538 If you are using vue-loader@>=10.0, simply update vue-template-compiler.
16:12:14.539 If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the lates

为什么在page.json加了insetLoader反而报错项目都跑不起来

20:04:19.619 Uncaught Error: Module build failed (from ./node_modules/@dcloudio/webpack-uni-pages-loader/lib/index.js):
Error: uni-app-compiler: Unexpected token } in JSON at position 1189
at parseJson (/Users/qinhonglin/Desktop/project/ShakeMoniterApp(1)/node_modules/@dcloudio/uni-cli-shared/lib/json.js:21:13)
at parsePagesJson (/Users/qinhonglin/Desktop/project/ShakeMoniterApp(1)/node_modules/@dcloudio/uni-cli-shared/lib/pages.js:42:27)
at Object. (/Users/qinhonglin/Desktop/project/ShakeMoniterApp(1)/node_modules/@dcloudio/webpack-uni-pages-loader/lib/index-new.js:73:19)
at Object. (/Users/qinhonglin/Desktop/project/ShakeMoniterApp(1)/node_modules/@dcloudio/webpack-uni-pages-loader/lib/index.js:57:35) at app-view.js:9
20:04:19.634 reportJSException >>>> exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack ->Uncaught Error: Module build failed (from ./node_modules/@dcloudio/webpack-uni-pages-loader/lib/index.js):
Error: uni-app-compiler: Unexpected token } in JSON at position 1189
at parseJson (/Users/qinhonglin/Desktop/project/ShakeMoniterApp(1)/node_modules/@dcloudio/uni-cli-shared/lib/json.js:21:13)
at parsePagesJson (/Users/qinhonglin/Desktop/project/ShakeMoniterApp(1)/node_modules/@dcloudio/uni-cli-shared/lib/pages.js:42:27)
at Object. (/Users/qinhonglin/Desktop/project/ShakeMoniterApp(1)/node_modules/@dcloudio/webpack-uni-pages-loader/lib/index-new.js:73:19)
at Object. (/Users/qinhonglin/Desktop/project/ShakeMoniterApp(1)/node_modules/@dcloudio/webpack-uni-pages-loader/lib/index.js:57:35)
at 1 (app-service.js:10:51)
at l (app-service.js:1:573)
at 0 (app-service.js:6:60)
at l (app-service.js:1:573)
at t(app-service.js:1:431)
at r (app-service.js:1:294)
at (app-service.js:2:49)