Laravel集成Vue时控制台报错的解决求助

Hey there, let's work through these Laravel + Vue issues one by one—they're all common starting-out problems, so you've got this!

1. Fixing the "Cannot find element: #app" Warning #

This happens because your app.js is loading in the <head> section of your template, before the <div id="app"> element is rendered in the DOM. Vue tries to mount itself to an element that doesn't exist yet.

Fix: Move the app.js script tag to right before the closing </body> tag, so the DOM is fully loaded before Vue initializes. Update your Admin template like this:

<body id="page-top">
<div id="app">
    <!-- Your existing content here -->
    <div class="container-fluid">
        @yield('main-content')
    </div>
    <!-- More existing content -->
</div>

<!-- Move app.js here -->
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('js/sb-admin-2.min.js') }}"></script>
@yield('js_index_page')
</body>
</html>

2. Fixing the popper.js.map 404 Error #

This error means your browser is trying to load a source map file for popper.js that doesn't exist in your public/js directory. Source maps are useful for debugging but aren't required for your app to run.

Quick Fix: Disable source maps in your Laravel Mix config. Open webpack.mix.js and add .sourceMaps(false) to your mix chain:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps(false); // Disable source maps to avoid 404

Then recompile your assets with npm run dev (or npm run watch for auto-recompile during development).

Alternatively, if you want source maps, make sure the popper.js.map file is included in your public/js folder (you might need to reinstall dependencies with npm install if it's missing).

3. Fixing the "v-model is not supported on this element type" Warning #

v-model only works with form elements like <input>, <select>, or <textarea>—you can't use it on a <div>. Your current code tries to bind permissionType to a div, which is invalid.

Fix: Move the v-model="permissionType" attribute to each of your radio input elements instead. Update the relevant section in create.blade.php:

<div class="col-md-10">
    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" id="basic" name="permission_type" class="custom-control-input" value="basic" v-model="permissionType" />
        <label class="custom-control-label font-weight-bold" for="basic">Simple Permission</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" id="crud" name="permission_type" class="custom-control-input" value="crud" v-model="permissionType" />
        <label class="custom-control-label font-weight-bold" for="crud">Advance Permission</label>
    </div>
</div>

Now when you select a radio button, Vue will automatically update the permissionType data property to match the selected value, which will correctly show/hide your form sections based on the v-if conditions.

After making these changes, run npm run dev to recompile your assets, then refresh your browser. All three errors should be resolved!

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