如何修复错误 "You may need an appropriate loader to handle this file type"

Question

我有一个全新的 Laravel 安装。使用 npm run dev VUE 编译文件时出现文件错误

"You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file"

Laravel版本：“^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 文件

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

Answer 1

因为你使用 laravel-mix 6 它有不同的配置 webpack.mix.js

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 link https://laravel-mix.com/docs/6.0/upgrade

Answer 2

如果有人仍然遇到这个问题，请看这里我是如何找出我的原因的，它实际上是一个 Laravel Vue 支持的 mix 6 配置问题。

您可以查看文档了解更多详情：Laravel mix 6 upgrade documentation

但让我在这里简单解释一下...

我正在使用 Laravel mix 6（如果你创建了一个新的 Laravel 8 项目，你可能会使用相同的）并且根据其官方文档“Laravel Mix 6 支持众多依赖项的最新版本，包括 webpack 5、PostCSS 8、Vue Loader 16 等”。所以你不需要添加 vue 加载器，尽管错误指出它。

你更需要明确地告诉 Laravel mix 6 来支持 vue，这里是他们所说的“Laravel Mix 最初构建时非常自以为是. 其中一个意见是 Vue 支持应该开箱即用。任何调用 mix.js() 将立即获得 Vue 单文件组件的好处.

虽然我们并没有完全删除 Vue 支持，但我们已经将 Vue 提取到它自己的“特色标志”：mix.vue().

这是我做的。

第一个选项

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

第二个选项

// 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', [
        //
]);

Answer 3

首先，感谢 Paul 的澄清，让我度过了一个愉快的夜晚:)

之后编译对我有用，但是当我重新加载页面时控制台出现错误：

Vue.use is not a function

对于那些情况相同的人，在您的 app.js 文件中，您必须替换行 :

window.Vue = require('vue');

与：

window.Vue = require('vue').default;

Answer 4

这里我解决了一些问题

mix.js('resources/js/app.js', 'public/js').vue()
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();

Answer 5

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

或

npm install vue-template-compiler vue-loader@^15.9.7 --save-dev --legacy-peer-deps

两个都试试..

如何修复错误 "You may need an appropriate loader to handle this file type"

How to fix the error "You may need an appropriate loader to handle this file type"

laravel

vue.js

laravel-vue

webpack.mix.js