(解决了) 老师 我在rollup中用require.context方式自动加载所有components, 但运行报错了

来源:11-7 【放大招了】rollup vue 组件编译

布罗利00

2020-11-07

已解决 在后续的vue 3.0 工程中 是正常的 没有任何问题

rollup中 通过rollup-plugin-require-context插件 已经支持了require.context
图片描述

入口js

export default (Vue) => {
  const requireComponent = require.context(
    './components',
    true,
    /index\.(js)$/
  )

  requireComponent.keys().forEach((item) => {
    const comp = requireComponent(item)
    console.log(comp)
    Vue.use(comp)
  })
}

index.html

  <div id="app">
    <h2>{{message}}</h2>
    <Test />
  </div>
  <script type="text/javascript">
    Vue.createApp({
      setup() {
        const message = Vue.ref('hello datav')
        return {
          message
        }
      }
    }).use(imoocDatav).mount('#app')
  </script>

组件Test

Test.vue

<template>
  <div>
    hello datav 2.0
  </div>
</template>

<script>
export default {
  name: 'Test'
}
</script>
import Test from './Test.vue'

export default (Vue) => {
  Vue.component(Test.name, Test)
}
写回答

2回答

布罗利00

提问者

2020-11-07

global.imoocDatav = factory(global.Vue)

把编译后的 global.vue改成global.Vue 首字母大写就好了,只能自己改?


### 在后续的vue 3.0 工程中 是正常的 没有任何问题

0
0

布罗利00

提问者

2020-11-07

普通引入也报这个错

入口js

```js

import Test from './components/Test'


export default function(Vue) {

  Vue.use(Test)

}

```

0
0

数据可视化入门到精通-打造前端差异化竞争力

同级别前端,掌握数据可视化薪资更高

1520 学习 · 1043 问题

查看课程