Laravel：vue组件不渲染
Posted
技术标签:
【中文标题】Laravel：vue组件不渲染【英文标题】：Laravel: vue components not rendering 【发布时间】：2019-09-23 22:09:36 【问题描述】：尽管有以下教程，但我的 vue 组件没有在页面上呈现。我有以下布局（master.blade.php）：
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="csrf-token" content=" csrf_token() ">
<title>Mileage</title>
<link rel="stylesheet" href=" mix('/css/app.css') " media="all">
</head>
<body>
<div id="app">
<example-component></example-component>
</div>
<script src=" mix('/js/app.js') "></script>
</body>
</html>
布局由以下控制器返回（我使用CAS登录）：
<?php
namespace App\Http\Controllers;
use App\LkpStaff;
use Illuminate\Http\Request;
class AuthController extends Controller
public function login()
if (!cas()->isAuthenticated())
cas()->authenticate();
$user = cas()->user();
$dbUser = LkpStaff::where('user_name', $user)->first(['staff_refid']);
if ($dbUser)
$userId = $dbUser->staff_refid;
else
$userId = $this->createNewUser($user);
session()->put('casUser', $user);
session()->put('userId', $userId);
return view('master', [
'casUser' => $user,
'userId' => $userId
]);
CAS 登录按预期工作，所以这不是问题。我只是想渲染 laravel 自带的示例组件（ExampleComponent.vue）：
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default
mounted()
console.log('Component mounted.')
</script>
我的 app.js 文件按预期注册了组件：
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue(
el: '#app'
);
我的 package.json 如下：
"private": true,
"scripts":
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
,
"devDependencies":
"axios": "^0.18",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
,
"dependencies":
"bulma": "^0.7.0",
"font-awesome": "^4.7.0",
"laravel-blade-compiler": "^1.0.10",
"moment": "^2.24.0",
"purify-css": "^1.2.5"
我使用了 npm install 和 npm run dev。我用 php artisan serve 为这个项目服务。页面如下所示（在浏览器控制台中）：
<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="csrf-token" content="gLzt6ZloAyL7kFEVuO0tHlv6XqlsCMlELSx9Eqg6">
<title>Mileage</title>
<link rel="stylesheet" href="/css/app.css" media="all">
</head>
<body>
<div id="app">
<example-component></example-component>
</div>
<script src="/js/app.js"></script>
</body></html>
如您所见，组件未呈现。控制台中也没有错误。除了创建一个新项目，我还能做些什么吗？
【问题讨论】：
你是否通过 NPM 编译了静态文件（只是一个双重检查问题）？ 是的，我确实做到了。 【参考方案1】：可能由于app.css 和app.js 的路径错误问题，您的组件无法呈现。
尝试使用如下资产进行渲染：
<link href="asset('css/app.css')" rel="stylesheet" type="text/css">
<script src="asset('js/app.js')"></script>
【讨论】：
我已经按照您的建议进行了尝试。看来路径没问题。我的应用可以找到该文件，如this图片所示。【参考方案2】：// 更新
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue(
el: '#app'
);
在 app.js 的组件中添加 .default。 更改您的链接和脚本 uri
<link rel="stylesheet" href=" asset('css/app.css') ">
<script src=" asset('js/app.js') "> </script>
【讨论】：
也尝试了更新。它不起作用。正如您在this 图像中看到的那样，该应用程序可以找到该文件。 您是否编译了更改？ 是的，我在每次更改时都进行了编译。【参考方案3】：尝试在模板下方添加 div 元素并在 div 内输入您的代码，然后在您的终端中输入 npm run watch 或 npm run dev 等到编译的消息出现在您的终端中，如果它们是错误的，它会提示您
【讨论】：
【参考方案4】：这很可能是导致它的缓存插件。 查看您是否安装了 Cloudflare 或 Nitropack 或任何其他类似的缓存插件
【讨论】：
以上是关于Laravel：vue组件不渲染的主要内容，如果未能解决你的问题，请参考以下文章
Laravel 6 + Vue.js 无法挂载组件：未定义模板或渲染函数
Laravel 和 Vue：在使用渲染任何组件之前从 Store 初始化身份验证