我想在Laravel项目中集成一个使用vuejs/vue-router
构建的项目。
Laravel已经包含一些组件。
我将新的项目文件放在websiteName/public/admin
中
然后把刀片放进去
ressources/view/front/admin/index.blade.php
这就是我的代码和配置webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js/app.js')
.js('resources/assets/admin/app.js','public/admin/app.js')
当我访问此路线页面时,什么都没有显示,并且出现此错误:
app.js:1108 Uncaught Error: Cannot find module 'C:\Users\dev\git\project\websiteName\resources\assets\admin\app.js'
at webpackMissingModule (app.js:1108)
at Object.<anonymous> (app.js:1108)
at __webpack_require__ (app.js:1091)
at app.js:1106
at Object.publicAdminAppJs (app.js:1106)
at __webpack_require__ (app.js:1068)
at Object._ (app.js:1110)
at __webpack_require__ (app.js:1068)
at app.js:1083
at Object.publicAdminAppJs (app.js:1083)
view.blade.php
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]-->
<link rel="icon" href="{{ asset('favicon.ico')}}">
<title>Test Test</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel=stylesheet type=text/css>
<link href="{{ asset('admin/template/css/icons/icomoon/styles.min.css')}}" rel=stylesheet type=text/css>
<link href="{{ asset('admin/assets/css/bootstrap.min.css')}}" rel=stylesheet type=text/css>
<link href="{{ asset('admin/assets/css/bootstrap_limitless.min.css')}}" rel=stylesheet type=text/css>
<link href="{{ asset('admin/assets/css/layout.min.css rel=stylesheet')}}" type=text/css>
<link href="{{ asset('admin/assets/css/components.min.css')}}" rel=stylesheet type=text/css>
<link href="{{ asset('admin/assets/css/colors.min.css')}}" rel=stylesheet type=text/css>
<link href="{{ asset('admin/assets/css/appCustom.css')}}" rel=stylesheet type=text/css>
<link href="{{ asset('fontawesome/css/all.min.css') }}" rel="stylesheet">
<link href="{{ asset('admin/css/app.210cc106.css')}}" rel=stylesheet>
<link href="{{ asset('/img/icons/favicon-32x32.png')}}" rel=icon type=image/png sizes=32x32>
<link href="{{ asset('/img/icons/favicon-16x16.png')}}" rel=icon type=image/png sizes=16x16>
<link href="{{ asset('/admin/manifest.json')}}" rel=manifest>
<meta name="csrf-token" content="{{csrf_token()}}">
<meta name=theme-color content=#4DBA87>
<meta name=apple-mobile-web-app-capable content=no>
<meta name=apple-mobile-web-app-status-bar-style content=default>
<meta name=apple-mobile-web-app-title content=rdv-web-app>
<link href="{{ asset('admin/img/icons/apple-touch-icon-152x152.png')}}" rel=apple-touch-icon >
<link href="{{ asset('admin/img/icons/safari-pinned-tab.svg color=#4DBA87')}}" rel=mask-icon >
<meta name=msapplication-TileImage content=/img/icons/msapplication-icon-144x144.png>
<meta name=msapplication-TileColor content=#000000>
</head>
<body>
<noscript>
<strong>We're sorry but rdv-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id=app>
</div>
<script src="{{ asset('admin/template/js/main/jquery.min.js')}}"></script>
<script src="{{ asset('admin/template/js/main/bootstrap.bundle.min.js')}}"></script>
<script src="{{ asset('admin/template/js/plugins/loaders/blockui.min.js')}}"></script>
<script src="{{ asset('admin/template/js/plugins/forms/styling/uniform.min.js')}}"></script>
<script src="{{ asset('admin/assets/js/app.js')}}"></script>
<script src="{{ asset('admin/template/js/demo_pages/login.js')}}"></script>
<script src="{{ asset('admin/template/js/demo_pages/form_checkboxes_radios.js')}}"></script>
<script src="{{ asset('admin/template/js/plugins/tables/datatables/datatables.min.js')}}"></script>
<script src="{{ asset('admin/template/js/plugins/forms/selects/select2.min.js')}}"></script>
<script type="application/javascript" src="{{ mix('admin/app.js') }}"></script>
</body>
我试图同时使用: 混合和资产,但没有任何变化。 请帮忙;
sorry for my english:
step 1 = build vuejs project using vue-cli.
step 2 = create controller in laravel render blade.
step 3 = create blade in view ,copy the content index.html and paste it in blade
step 4 = use asset to link css/js files
step 5 = finally create route.
导航到路线