引导安装后NPM运行dev错误

Question

在vue和laravel的教程之后，我设法开始了。一切都很好，我甚至实现了我的第一个vue组件，直到我试图安装bootstrap。

现在我在

之后得到以下错误

npm run dev

谁能告诉我解决这个问题的正确方向?我尝试了许多我在网上找到的解决方案，删除node_modules文件夹，清洁安装，更新等。恐怕我还不知道从哪里开始解决问题就把事情搞砸了。

错误:

> dev
> npm run development

> @ development D:laravelijsbreker_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:laravelijsbreker_memorynpm-debug.log
npm ERR! code 1
npm ERR! path D:laravelijsbreker_memory
npm ERR! command failed
npm ERR! command C:Windowssystem32cmd.exe /d /s /c npm run development
npm ERR! A complete log of this run can be found in:
npm ERR!     C:UsersxxxAppDataLocalnpm-cache_logs2021-08-09T15_42_13_853Z-debug.log 

在问题开始之前我给出的命令来自教程:

=============================================================================步骤2:安装Laravel/UILaravel 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

如果你跟着我，你将有Bootstrap 5安装在你的Laravel项目成功。你可以检查你的项目是否安装了Bootstrap版本。json文件。

====================================================================================

我的包。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"
}
}

Answer 1

您使用的是哪个版本的node.js ?，可能你需要升级你的节点版本，我使用nodejs版本16.6.1 https://nodejs.org/en/download/current/(最新)。我以前在旧版本的nodejs中遇到过类似的问题。