Laravel 5.5中自定义Vue组件无法渲染问题求助

我来帮你排查这个问题，结合你给出的代码和描述，大概率是下面几个原因之一，你可以逐一排查：

1. Vue 2.x要求组件模板必须有单一根节点 #

你写的Test.vue模板里直接放了<h1>和<p>两个同级元素，这在Vue 2.x里是不允许的——每个组件的模板必须被一个单一根元素包裹。虽然控制台可能没有明显报错，但这会导致组件无法正常渲染。

修改你的Test.vue，把内容包裹在一个容器里，比如<div>：

<template>
  <div>
    <h1>hello</h1>
    <p>Bla bla bla</p>
  </div>
</template>

<script>
export default { }
</script>

<style scoped>
</style>

2. 忘记重新编译前端资源 #

你在app.js里注册了新组件，但Laravel Mix需要重新编译才能把新组件的代码打包到app.js里。如果没有编译，浏览器加载的还是旧的app.js，自然找不到你的<test>组件。

在项目根目录运行以下命令重新编译：

# 开发环境编译
npm run dev

# 或者监听文件变化自动编译
npm run watch

3. 浏览器缓存了旧的app.js #

有时候浏览器会缓存之前的app.js文件，即使你已经重新编译了，还是加载旧版本。可以尝试：

• 强制刷新浏览器：Windows按Ctrl+F5，Mac按Cmd+Shift+R
• 清除浏览器的缓存文件

4. 组件文件路径或大小写问题 #

检查你的Test.vue文件是否确实放在resources/js/components/目录下，并且文件名是否正确（注意大小写！比如Linux环境下Test.vue和test.vue是两个不同的文件）。

另外，确认app.js里的路径是否正确：

Vue.component('test', require('./components/Test.vue'));

如果以上步骤都试过还是不行，可以打开浏览器的开发者工具，切换到Network标签，刷新页面，查看app.js的加载情况，确认它的内容里包含了你的Test组件的代码。

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