【发布时间】：2021-10-13 07:56:10
【问题描述】：
按照关于 vue 和 laravel 的教程，我设法开始了。 一切都很好，我什至实现了我的第一个 vue 组件，直到我尝试安装 bootstrap。
现在我收到以下错误
npm run dev
谁能指出我解决这个问题的正确方向？ 我尝试了很多我在网上找到的解决方案，删除 node_modules 文件夹、全新安装、更新等。 恐怕我搞砸了，不知道从哪里开始解决问题。
这是错误：
> dev
> npm run development
> @ development D:\laravel\ijsbreker_memory
> mix
× Mix
Compiled with some errors in 5.26s
ERROR in ./resources/js/components/Cards.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>
| <h2 > Cards </h2>
webpack compiled with 1 error
npm ERR! Windows_NT 10.0.19043
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "D:\\laravel\\ijsbreker_memory\\node_modules\\npm\\bin\\npm-cli.js" "run" "development"
npm ERR! node v14.16.0
npm ERR! npm v2.15.12
npm ERR! code ELIFECYCLE
npm ERR! @ development: `mix`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script 'mix'.
npm ERR! This is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! mix
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! D:laravel\ijsbreker_memory\npm-debug.log
npm ERR! code 1
npm ERR! path D:\laravel\ijsbreker_memory
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c npm run development
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xxx\AppData\Local\npm-cache\_logs\2021-08-09T15_42_13_853Z-debug.log
我在麻烦开始之前给出的命令来自教程：
================================================ =============================== 第 2 步：安装 Laravel/UI Laravel UI 是一个官方库，带有预定义的 UI 组件。 要安装 Laravel/UI，请运行以下命令：
composer require laravel/ui
第 3 步：在 Laravel 中安装 Bootstrap 5 在这一步中，请按照相同的顺序跟随我的命令，不要跳过下面列出的任何命令。
php artisan ui bootstrap
你可能注意到这个命令会安装 Bootstrap 4，你必须运行它的原因是它会为你设置很多东西，所以你不必自己做，与直接安装 bootstrap 5 相比。
现在我们将使用此命令将 Bootstrap 版本切换到 Bootstrap 5。
请注意，您应该以相同的顺序运行这两个命令，这样您就不会遇到任何问题。
npm install bootstrap@next @popperjs/core --save-dev
npm install bootstrap @popperjs/core --save-dev
接下来，您只需：
npm install
npm run dev
如果您跟进我，您将成功在您的 Laravel 项目中安装 Bootstrap 5。您可以在 package.json 文件中检查是否希望在您的项目中安装 Bootstrap 版本。
================================================ ======================================
我的 package.json 文件：
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"@popperjs/core": "^2.9.3",
"axios": "^0.21",
"bootstrap": "^5.1.0",
"jquery": "^3.6",
"laravel-mix": "^6.0.27",
"lodash": "^4.17.19",
"popper.js": "^1.16.1",
"postcss": "^8.1.14",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.11",
"sass-loader": "^11.0.1",
"vue": "^2.6.12",
"vue-loader": "^15.9.7",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"latest": "^0.2.0"
}
}
【问题讨论】：