Vue 3：通过插件添加全局方法不起作用

Question

我正在尝试构建一种可以在任何模板中使用的方法来自动构建本地图像网址。

我面临的问题是，当我尝试构建一个添加全局属性的插件时，它不起作用！

插件代码

// src/plugins/urlbuilder.js
export default {
    install: (app) => {
        app.config.globalProperties.buildImageUrl = imageName => require('@/assets/images/' + imageName);
    }
}

Main.js 文件

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import urlbuilder from './plugins/urlbuilder.js'

createApp(App).use(router).use(urlbuilder).mount('#app')

我渲染图像的主视图

// src/views/Home.vue
<template>
    <img :src="buildImageUrl('myimage.jpg')">
</template>

我在开发控制台中收到此错误：

Uncaught (in promise) TypeError: _ctx.buildImageUrl is not a function
    at Proxy.render (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader-v16/dist/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/views/Home.vue?vue&type=template&id=fae5bece&scoped=true:57)
    at renderComponentRoot (runtime-core.esm-bundler.js:922)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:4667)
    at ReactiveEffect.run (reactivity.esm-bundler.js:195)
    at setupRenderEffect (runtime-core.esm-bundler.js:4793)
    at mountComponent (runtime-core.esm-bundler.js:4576)
    at processComponent (runtime-core.esm-bundler.js:4534)
    at patch (runtime-core.esm-bundler.js:4138)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:4744)
    at ReactiveEffect.run (reactivity.esm-bundler.js:195)

注意：当我添加纯粹的全局属性时，这有效，但我读到执行此操作的最佳方法是通过插件。

当我这样做时它有效：

app = createApp(App)

app.config.globalProperties.buildImageUrl = imageName => require('@/assets/images/' + imageName)

app.use(router).mount('#app')

我究竟做错了什么？

Answer 1

更好的方法是使用提供和注入

import urlbuilder from './plugins/urlbuilder.js'

app.provide('$urlbuilder', urlbuilder);

阅读有关提供和注入的更多信息