为什么我尝试在 VueJS 中加载组件时出现此错误?
Why do I get this error when I try to load the component in VueJS?
我必须尝试尝试,但解决方案仍然是一样的,我是否遗漏了任何步骤?
<template>
<div>
<component v-bind:is="components"></component>
</div>
</template>
<script>
import invbo from './components/inventory.vue';
import itemsrbo from './components/itemsearch.vue';
import mainbo from './components/mainbo.vue';
export default {
components:{
'inventory':invbo,
'item-search':itemsrbo,
'mainbo':mainbo,
},
data(){
return{
components: 'mainbo'
}
}
}
</script>
错误信息
./src/views/Home.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-cli-plugin-quasar/lib/loader.auto-import.js?kebab!./node_modules/cache-loader/dist/cjs.js??ref--0-1!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve './components/inventory.vue' in 'C:\Users\...\src\views'
这里是我尝试从组件目录加载 vue 组件的示例代码。
Post库存组件?
在inventory.vue
您应该将组件导出为:
export default {}
所以你需要使用正确的相对路径,然后:import invbo from '../components/inventory.vue
@MartinBean 的回答
我必须尝试尝试,但解决方案仍然是一样的,我是否遗漏了任何步骤?
<template>
<div>
<component v-bind:is="components"></component>
</div>
</template>
<script>
import invbo from './components/inventory.vue';
import itemsrbo from './components/itemsearch.vue';
import mainbo from './components/mainbo.vue';
export default {
components:{
'inventory':invbo,
'item-search':itemsrbo,
'mainbo':mainbo,
},
data(){
return{
components: 'mainbo'
}
}
}
</script>
错误信息
./src/views/Home.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-cli-plugin-quasar/lib/loader.auto-import.js?kebab!./node_modules/cache-loader/dist/cjs.js??ref--0-1!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve './components/inventory.vue' in 'C:\Users\...\src\views'
这里是我尝试从组件目录加载 vue 组件的示例代码。
Post库存组件?
在inventory.vue
您应该将组件导出为:
export default {}
所以你需要使用正确的相对路径,然后:import invbo from '../components/inventory.vue
@MartinBean 的回答