53

我有一个全新的 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!
4

5 回答 5

138

因为你使用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

于 2021-01-07T08:57:09.470 回答
14

如果有人仍然遇到这个问题，这里我是如何找出原因的，这实际上是一个 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', [
        //
]);
于 2021-01-25T09:39:17.670 回答
2

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

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

Vue.use is not a function

对于那些将处于相同情况的人，在您的 app.js 文件中，您必须替换以下行：

window.Vue = require('vue');

和 ：

window.Vue = require('vue').default;
于 2021-04-20T20:09:15.393 回答
2

我在这里解决一些问题

mix.js('resources/js/app.js', 'public/js').vue()
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();
于 2021-09-17T04:32:29.587 回答
0

mix.js('resources/js/app.js', 'public/js').vue() .postCss('resources/css/app.css', 'public/css', [ // ]);

或者

npm install vue-template-compiler vue-loader@^15.9.7 --save-dev --legacy-peer-deps

两个都试试。。

于 2021-12-16T14:30:10.323 回答