如何修复错误“您可能需要合适的加载程序来处理此文件类型”

如何解决如何修复错误“您可能需要合适的加载程序来处理此文件类型”

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

“您可能需要一个合适的加载器来处理此文件类型，目前没有配置加载器来处理此文件”

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

刀片文件

 <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 有不同的配置

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

参考链接 https://laravel-mix.com/docs/6.0/upgrade

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

您可以查看文档了解更多详情：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',[
        //
]);

第二种选择

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

首先，感谢 Paul 的澄清，这挽救了我的夜晚 :)

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

Vue.use is not a function

对于同样情况的人，在你的 app.js 文件中，你必须替换该行：

window.Vue = require('vue');

与：

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