使用parcel-plugin-vue编译后.vue组件运行时为何显示undefined？

嘿，我一眼就看出问题所在了——你在导入组件的时候用了命名导入，但你的welcome.vue里是用默认导出的方式暴露组件的，这就导致运行时Welcome变成undefined了！

问题根源 #

在main.js里你写的是：

import { Welcome } from './app/widgets/welcome/welcome.vue';

这种带花括号的写法是用来导入命名导出的内容，但你的welcome.vue的<script>部分是：

<script>
export default {
  components: {}
}
</script>

这里用的是export default（默认导出），两者不匹配，自然拿不到正确的组件实例。

修复方案 #

1. 修正导入方式 #

把命名导入改成默认导入，去掉花括号即可：

import Welcome from './app/widgets/welcome/welcome.vue';

2. 修正Vue实例的template配置 #

另外还有个小细节：Vue的template选项需要的是模板字符串，而不是组件对象本身。你原来直接写template: Welcome是错误的，得改成使用组件标签的模板：

function startVue() {
  new Vue({
    el: '#app',
    template: '<Welcome/>',
    components: { Welcome }
  });
}

或者更推荐用render函数，写法更简洁高效：

function startVue() {
  new Vue({
    el: '#app',
    render: h => h(Welcome)
  });
}

验证修复 #

修改完成后，重新运行你的编译命令：

./node_modules/.bin/parcel index.html

现在浏览器应该能正常显示Welcome标题了。

内容的提问来源于stack exchange，提问作者Richard