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

Question

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

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

Laravel 版本：“^8.12”

包.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>

应用程序.js

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

你好.vue

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

}
</script>

npm 运行开发

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

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

Answer 2

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

您可以查看文档以获取更多详细信息：Laravel mix 6 升级文档

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

我使用的是 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

我在这里解决一些问题

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