Laravel:Vue组件无法渲染 [英] Laravel: vue components not rendering
问题描述
尽管有以下教程，但我的Vue组件未在页面上呈现.我有以下布局(master.blade.php):
My vue components are not rendering on the page, despite following tutorials. I have the following layout (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登录):
The layout is returned by the following controller (I use CAS for login):
<?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)随附的示例组件:
The CAS login works as intended, so that's not a problem. I am simply trying to render the example component that comes with 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文件按预期注册了该组件:
My app.js file registers the component as expected:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
});
我的package.json是以下内容:
My package.json is the following:
{
"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服务该项目.该页面如下所示(在浏览器控制台中):
I used npm install and npm run dev. I served the project with php artisan serve. The page looks like this (in the browser console):
<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>
如您所见，该组件未渲染.控制台中也没有错误.除了创建新项目，我还能做些什么吗?
As you can see, the component is not rendered. There are no errors in the console either. Is there anything I can do short of creating a new project?
推荐答案
也许是由于 app.css 和 app.js 路径错误导致组件无法渲染
Maybe your component is not rendering due to wrong path issue for app.css and app.js.
尝试通过使用资产来渲染:
Try to render by using asset like :
< link href ="{{asset('css/app.css')}}""rel =" stylesheet"type =" text/css>
< script src ="{{asset('js/app.js')}}"></script>
这篇关于Laravel:Vue组件无法渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
