Laravel, Vue - “你可能需要一个合适的加载器"对于模板标签 [英] Laravel, Vue - "You may need an appropriate loader" for template tags
问题描述
我目前正在使用 Laravel 和 Vue 构建 Web 应用程序.我得到的错误是针对我拥有的所有组件.
ERROR in ./resources/assets/js/components/App 1:0模块解析失败:意外令牌 (1:0)您可能需要一个合适的加载器来处理此文件类型，目前没有配置加载器来处理此文件.见 https://webpack.js.org/concepts#loaders><模板>|<div id="layout-wrapper">|<app-topbar></app-topbar>@ ./resources/assets/js/app.js 6:0-35 41:11-14@多 ./resources/assets/js/app.js ./resources/assets/sass/style.scssApp.vue 文件如下所示:
<div id="layout-wrapper"><app-topbar></app-topbar><app-menu></app-menu><div class="main-content"><div class="page-content"><路由器视图></路由器视图><app-footer></app-footer></模板><脚本>从 './_partials/AppTopbar' 导入 AppTopbar从 './_partials/AppMenu' 导入 AppMenu从 './_partials/AppFooter' 导入 AppFooter从./users/Users"导入用户从'./dashboard/Dashboard'导入仪表板导出默认{成分: {'app-topbar':AppTopbar，应用菜单":应用菜单，'app-footer':AppFooter，用户，仪表盘，},beforeMount() {axios.get('/元数据').then(响应 => {窗口.Laravel = {回应:回应，current_year: response.current_year,csrf: response.csrf,资产(路径){返回 this.response.asset+'/'+path;},转(文本){返回 this.response.trans[text];},路线(名称){返回 this.response.base_url+'/'+this.response.routes[name];}};});},}
从错误中，我了解到问题在于<template></template>标签没有被解析.根据我的发现，我需要它们的 vue-loader 和 vue-template-compiler 依赖项.我已经安装了这些，但是，我仍然不断收到这些错误.我还发现尝试 vue-loader 的旧版本(当前 15.x.x ，旧 14.x.x)可能会有所帮助，但没有.
我的版本是:拉拉维尔 8.12.3npm 6.14.4package.json 依赖项:
devDependencies":{axios":^0.19"，跨环境":^7.0"，laravel-mix":^5.0.1"，lodash":^4.17.19"，resolve-url-loader":^3.1.0"，sass":^1.29.0"，sass-loader":^8.0.2"，vue-template-compiler":^2.6.12"；},依赖关系":{vue":^2.6.12"，vue-loader":^14.2.4"，vue-router":^3.4.9"}由于我对Vue不熟练，所以我明白我做错了什么.但是，我还没有在网上找到解决方案.所以，我想请求你的帮助.
更新:因为 Laravel 有一个预配置的 webpack.config 文件，所以我想我可以向你展示.webpack.mix.js :
const mix = require('laravel-mix');/*|--------------------------------------------------------------------------|混合资产管理|--------------------------------------------------------------------------||Mix 提供了一个干净、流畅的 API 来定义一些 Webpack 构建步骤|用于您的 Laravel 应用程序.默认情况下，我们正在编译 CSS|应用程序的文件以及捆绑所有 JS 文件.|*/mix.sass('资源/资产/sass/style.scss', '公共/资产').js('资源/资产/js/app.js', '公共/js').styles([//布局'资源/资产/模板/系统/css/bootstrap.min.css'，'资源/资产/模板/系统/css/icons.min.css'，'资源/资产/模板/系统/css/app.min.css',//数据表'资源/资产/模板/系统/css/dataTables.bootstrap4.min.css'，'资源/资产/模板/系统/css/responsive.bootstrap4.min.css'，//风俗'公共/资产/style.css'], 'public/css/style.min.css').scripts([//布局'资源/资产/模板/系统/js/jquery.min.js','资源/资产/模板/系统/js/bootstrap.bundle.min.js','资源/资产/模板/系统/js/metisMenu.min.js','资源/资产/模板/系统/js/simplebar.min.js'，'资源/资产/模板/系统/js/waves.min.js'，'资源/资产/模板/系统/js/jquery.sparkline.min.js'，'资源/资产/模板/系统/js/morris.min.js'，'资源/资产/模板/系统/js/raphael.min.js'，'资源/资产/模板/系统/js/app.js',//数据表'资源/资产/模板/系统/js/jquery.dataTables.min.js','资源/资产/模板/系统/js/dataTables.bootstrap4.min.js','资源/资产/模板/系统/js/dataTables.responsive.min.js'，'资源/资产/模板/系统/js/responsive.bootstrap4.min.js'，//视图//'资源/资产/模板/系统/js/vue.js',//风俗//'资源/资产/js/vue.js','公共/js/app.js','资源/资产/js/script.js'], 'public/js/script.min.js');应用 Laravel 8 + Vue 2.6 版本然后请改代码
<块引用>webpack.mix.js
mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [//]);到
mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [//]).vue();您可能需要一个合适的加载器来处理这种文件类型"；laravel 和 vue 应用程序错误原因 >>package.json - laravel-mix":^6.0.6"；是版本 6 或更高版本.
I am currently building a web application using Laravel and Vue. The error that I am getting is for all the components that I have.
ERROR in ./resources/assets/js/components/App 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 id="layout-wrapper">
| <app-topbar></app-topbar>
@ ./resources/assets/js/app.js 6:0-35 41:11-14
@ multi ./resources/assets/js/app.js ./resources/assets/sass/style.scss
the App.vue file looks like this:
<template>
<div id="layout-wrapper">
<app-topbar></app-topbar>
<app-menu></app-menu>
<div class="main-content">
<div class="page-content">
<router-view></router-view>
<app-footer></app-footer>
</div>
</div>
</div>
</template>
<script>
import AppTopbar from './_partials/AppTopbar'
import AppMenu from './_partials/AppMenu'
import AppFooter from './_partials/AppFooter'
import Users from './users/Users'
import Dashboard from './dashboard/Dashboard'
export default {
components: {
'app-topbar': AppTopbar,
'app-menu': AppMenu,
'app-footer': AppFooter,
Users,
Dashboard,
},
beforeMount() {
axios.get('/metadata')
.then(response => {
window.Laravel = {
response: response,
current_year: response.current_year,
csrf: response.csrf,
asset(path){
return this.response.asset+'/'+path;
},
trans(text){
return this.response.trans[text];
},
route(name){
return this.response.base_url+'/'+this.response.routes[name];
}
};
});
},
}
</script>
From the error, I understand that the problem is that <template></template> tags are not being parsed. From what I found out I need the vue-loader and vue-template-compiler dependencies for them. I have already installed those, however, I still keep getting these errors. I also found that trying the older version (current 15.x.x , older 14.x.x) of vue-loader could help, but it did not.
My versions are: laravel 8.12.3 npm 6.14.4 package.json dependencies:
"devDependencies": {
"axios": "^0.19",
"cross-env": "^7.0",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"resolve-url-loader": "^3.1.0",
"sass": "^1.29.0",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"vue": "^2.6.12",
"vue-loader": "^14.2.4",
"vue-router": "^3.4.9"
}
Since I am not skilled in Vue, I understand that I did something wrong. However, I have not found solutions online. So, I would like to ask for your help.
Update: Since Laravel has a pre-configured webpack.config file then probably, this is what I think I am able to show you. webpack.mix.js :
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.sass('resources/assets/sass/style.scss', 'public/assets')
.js('resources/assets/js/app.js', 'public/js')
.styles([
// Layout
'resources/assets/template/system/css/bootstrap.min.css',
'resources/assets/template/system/css/icons.min.css',
'resources/assets/template/system/css/app.min.css',
// Data Table
'resources/assets/template/system/css/dataTables.bootstrap4.min.css',
'resources/assets/template/system/css/responsive.bootstrap4.min.css',
// Custom
'public/assets/style.css'
], 'public/css/style.min.css')
.scripts([
// Layout
'resources/assets/template/system/js/jquery.min.js',
'resources/assets/template/system/js/bootstrap.bundle.min.js',
'resources/assets/template/system/js/metisMenu.min.js',
'resources/assets/template/system/js/simplebar.min.js',
'resources/assets/template/system/js/waves.min.js',
'resources/assets/template/system/js/jquery.sparkline.min.js',
'resources/assets/template/system/js/morris.min.js',
'resources/assets/template/system/js/raphael.min.js',
'resources/assets/template/system/js/app.js',
// Data Tables
'resources/assets/template/system/js/jquery.dataTables.min.js',
'resources/assets/template/system/js/dataTables.bootstrap4.min.js',
'resources/assets/template/system/js/dataTables.responsive.min.js',
'resources/assets/template/system/js/responsive.bootstrap4.min.js',
// Vue
//'resources/assets/template/system/js/vue.js',
// Custom
//'resources/assets/js/vue.js',
'public/js/app.js',
'resources/assets/js/script.js'
], 'public/js/script.min.js');
Application Laravel 8 + Vue 2.6 versions then please change the code in the
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
To
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]).vue();
"you may need an appropriate loader to handle this file type" laravel and vue application error reason >> package.json - "laravel-mix": "^6.0.6" is version 6 or higher.
这篇关于Laravel, Vue - “你可能需要一个合适的加载器"对于模板标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
