Laravel, Vue - 模板标签的“你可能需要一个合适的加载器”
Posted
技术标签:
【中文标题】Laravel, Vue - 模板标签的“你可能需要一个合适的加载器”【英文标题】:Laravel, Vue - "You may need an appropriate loader" for template tags 【发布时间】:2021-03-08 14:35:38 【问题描述】:我目前正在使用 Laravel 和 Vue 构建一个 Web 应用程序。我得到的错误是针对我拥有的所有组件。
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
App.vue 文件如下所示:
<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>
从错误中,我了解到问题是 标签没有被解析。根据我的发现,我需要它们的 vue-loader 和 vue-template-compiler 依赖项。我已经安装了这些,但是,我仍然不断收到这些错误。 我还发现尝试 vue-loader 的旧版本(当前 15.x.x,旧 14.x.x)可能会有所帮助,但它没有。
我的版本是: 拉拉维尔 8.12.3 npm 6.14.4 package.json 依赖:
"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"
由于我不熟悉 Vue,所以我知道我做错了什么。但是,我没有在网上找到解决方案。所以,我想请求你的帮助。
更新: 因为 Laravel 有一个预配置的 webpack.config 文件,所以我想这就是我能够向你展示的。 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');
【问题讨论】:
您在项目中使用vue-cli
吗?如果没有,是否有可以共享的 webpack 配置?那里可能缺少 vue-loader
定义。
【参考方案1】:
在 Laravel 8 中,资产的编译方式略有不同。如果您声明要在 webpack.mix.js 中编译 vue 文件,它只会添加 vue 编译器作为依赖项。
看看我这样做后发生了什么:http://prntscr.com/whr7wv
尝试更改 .js('resources/assets/js/app.js', 'public/js')
到 .js('resources/assets/js/app.js', 'public/js').vue()
如果成功则返回帖子。
注意:考虑不要使用 laravel/ui 并手动创建 app.js
【讨论】:
我在根文件夹中编辑了 webpack.mix.js 并为我工作,谢谢!【参考方案2】:应用 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 或更高版本。
【讨论】:
【参考方案3】:这对我有用(Laravel 8 + Vue 2.6)。修改代码中的
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();
到
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.vue();
然后运行
npm 更新 vue-loader
【讨论】:
不建议复制已经接受的答案,稍微调整一下然后自己给他们。如果您有什么要补充的,您可以对该答案发表评论。【参考方案4】:其实你在 laravel 中并没有为 vue 文件安装 ui,所以它无法识别 vue 文件中的模板标签。所以在新终端中运行一些命令:
composer require laravel/ui
php artisan ui vue
npm install && npm run dev
【讨论】:
以上是关于Laravel, Vue - 模板标签的“你可能需要一个合适的加载器”的主要内容,如果未能解决你的问题,请参考以下文章
Vue Router Laravel 5.3 Vue 2 JS 上的 CSRF 令牌复制