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

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!

原文由 Fredericka Hartman 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Kamlesh Paul 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果有人仍然遇到这个问题，这里我是如何找出原因的，这实际上是一个 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', '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', [
        //
]);

原文由 Vidral Bonvi 发布，翻译遵循 CC BY-SA 4.0 许可协议