Laravel Vue You may need an appropriate loader to handle this file type,

人走茶凉 提交于 2021-02-02 08:47:25

问题


fresh Laravel installation on compiling files using npm run dev VUE file error "You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file"

Laravel Verion: "^8.12"

Package.json

 "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "vue": "^2.5.17",
        "vue-loader": "^15.9.6",
        "vue-template-compiler": "^2.6.10"
    }

blade file

 <div id="app">
        <hello></hello>
    </div>
    <script src="{{mix('js/app.js')}}"></script>

app.js

require('./bootstrap');
import  Vue from  'vue'    
Vue.component('hello', require('./hello.vue').default);
const app = new Vue({
    el: '#app'
});

Hello.vue

<template>
    <div>
        Hello World!
    </div>
</template>
<script>
export default {

}
</script>

npm run dev

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|     <div>
|         Hello World!

回答1:


as your using laravel-mix 6 it have different config for webpack.mix.js

webpack.mix.js

use .vue()

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

ref link https://laravel-mix.com/docs/6.0/upgrade




回答2:


If anyone still encounters this issue, here how I figure out the cause in my case and it's actually a Laravel mix 6 configuration issue for Vue support.

You can check the documentation for more details : Laravel mix 6 upgrade documentation

But let me explain it in short here...

I was using Laravel mix 6 (you may probably use the same if you created a fresh Laravel 8 project) and according to its official documentation "Laravel Mix 6 ships with support for the latest versions of numerous dependencies, including webpack 5, PostCSS 8, Vue Loader 16, and more". So no need for you to add vue loader although the error states it.

You rather need to tell explicitly Laravel mix 6 to support vue, here what they say "Laravel Mix was originally built to be quite opinionated. One of these opinions was that Vue support should be provided out of the box. Any call to mix.js() would instantly come with the benefit of Vue single-file components.

Though we're not removing Vue support by any stretch, we have extracted Vue to its own "featured flag": mix.vue().

Here what I did.

First option

// You can simply use this
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
        //
]);

Second option

// Or this if you want to extract styles as well
// Feel free to check the documentation for more customisations
mix.js('resources/js/app.js', 'public/js')
.vue({
    extractStyles: true,
    globalStyles: false
})
.postCss('resources/css/app.css', 'public/css', [
        //
]);


来源:https://stackoverflow.com/questions/65607153/laravel-vue-you-may-need-an-appropriate-loader-to-handle-this-file-type

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!