时间戳

首页 > 解决方案 > 可以在 laravel 项目中集成 2 个项目 vuejs

laravel - 可以在 laravel 项目中集成 2 个项目 vuejs

问题描述

我想集成一个vuejs/vue-router在 Laravel 项目中构建的项目。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.

导航器进入路线

标签： laravelapivue.js

解决方案

推荐阅读