收到以下错误“您可能需要适当的加载程序来处理此文件类型，例如。”运行“npm run watch”后

Posted 2023-02-23

【中文标题】收到以下错误“您可能需要适当的加载程序来处理此文件类型，例如。”运行“npm run watch”后

【英文标题】：Getting the following error "You may need an appropriate loader to handle this file type, e." after running the "npm run watch"

【发布时间】：2021-11-13 09:16:17

【问题描述】：

极客需要一点帮助，任何建议或提示将不胜感激。 问题是我正在尝试在 Laravel 上安装 Vue。但在安装了 Vue 路由器后，我决定使用“npm run watch”编译所有内容，但我在控制台上收到以下错误： 注意* 在运行“npm run watch”命令之前，浏览器（“Vue Dev Tool”）检测到了 Vue，但现在无法检测到，我不知道我在哪里犯了错误:(。

ERROR in ./resources/js/components/ExampleComponent.Vue 1:0
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 class="container">
|         <div class="row justify-content-center">

webpack compiled with 1 error

APP.js 代码

require('./bootstrap');

import router from "./routes";
import VueRouter  from "vue-router";
import Vue from "vue";

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

Vue.component(
        'example-component', 
        require('./components/ExampleComponent.vue').default);
Vue.use(VueRouter);

const app = new Vue(
    el: '#app',
    router,
);

Routes.js 代码

import ExampleComponent from "./components/ExampleComponent.Vue";
import VueRouter  from "vue-router";

const routes = [
    
        path : "/",
        component:ExampleComponent,
        name:"home",
        
    
];

const router = new VueRouter(
    routes // short for `routes: routes`
  );

  export default router;
  

【问题讨论】：

.Vue 应该是.vue？

【参考方案1】：

我通过编辑解决了webpack.mix.js

来自

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

到

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

然后做

npm update
npm run dev