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

Question

我有一个全新的拉威尔装置。使用npm run dev VUE编译文件时，我收到一个文件错误

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

拉雷维尔·韦里恩：“^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>

应用程序。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

首先，感谢保罗的澄清拯救了我的夜晚：）

在那之后，编译为我工作，但当我重新加载页面时，控制台中出现了一个错误：

Vue.use is not a function

对于那些同样情况的人，请在你的应用程序中。js文件，必须替换该行：

window.Vue = require('vue');

与：

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

Answer 2

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

您可以查看留档了解更多详情：Laravel混合6升级留档

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

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

你需要明确地告诉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

当你使用laravel mix 6时，它有不同的网页配置。混合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