如何解决错误“您可能需要适当的加载程序来处理此文件类型"， [英] How to fix the error "You may need an appropriate loader to handle this file type"

问题描述

我重新安装了Laravel.使用 npm运行dev VUE 编译文件时，出现文件错误

I have a fresh Laravel installation. On compiling files using npm run dev VUE I get a 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"

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"
    }

刀片文件

 <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!

推荐答案

在使用 laravel-mix 6 时，它对webpack.mix.js具有不同的配置

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

使用 .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链接 https://laravel-mix.com/docs/6.0/upgrade

这篇关于如何解决错误“您可能需要适当的加载程序来处理此文件类型"，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！