Laravel添加引导javascript文件不起作用答案

【问题标题】：Laravel adding bootstrap javascript files not workingLaravel添加引导javascript文件不起作用
【发布时间】：2021-07-20 00:48:37
【问题描述】：

我有一个 Laravel 项目，我正在尝试将 bootstrap.bundle.min.js 和 bootstrap.min.js 文件添加到我的 header.blade.php 文件中，但我似乎在控制台中遇到了以下错误：

资源解释为样式表，但使用 MIME 类型应用程序/javascript 传输：“http://localhost:8000/css/bootstrap/js/bootstrap.bundle.min.js”。

资源解释为样式表，但使用 MIME 类型 application/javascript: "http://localhost:8000/css/bootstrap/js/bootstrap.min.js" 传输。

Bootstrap 似乎可以正常工作，但它附带的 Javascript 文件却不行。

HEADER.BLADE.PHP

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Album example for Bootstrap</title>


<script src="/css/bootstrap/js/jquery-3.4.1.min.js"></script>

<link href="/css/bootstrap/js/bootstrap.bundle.min.js" rel="stylesheet">
<link href="/css/bootstrap/js/bootstrap.min.js" rel="stylesheet">

<link href="/css/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<link href="/css/main.css" rel="stylesheet">
<link href="/css/media.css" rel="stylesheet">

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": {
        "@tailwindcss/forms": "^0.2.1",
        "@tailwindcss/typography": "^0.3.0",
        "alpinejs": "^2.7.3",
        "axios": "^0.21",
        "laravel-mix": "^6.0.16",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "postcss-import": "^12.0.1",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.8",
        "sass-loader": "^11.0.1",
        "tailwindcss": "^2.0.1",
        "webpack-cli": "^4.6.0"
    },
    "name": "epood6",
    "description": "<p align=\"center\"><a href=\"https://laravel.com\" target=\"_blank\"><img src=\"https://raw.githubusercontent.com/laravel/art/master/logo-lockup/5%20SVG/2%20CMYK/1%20Full%20Color/laravel-logolockup-cmyk-red.svg\" width=\"400\"></a></p>",
    "version": "1.0.0",
    "main": "webpack.mix.js",
    "directories": {
        "test": "tests"
    },
    "dependencies": [],
    "keywords": [],
    "author": "",
    "license": "ISC"
}

【问题讨论】：

标签： laravel

【解决方案1】：

<link href="/css/bootstrap/js/bootstrap.min.js" rel="stylesheet">

.js 文件不是<link>s，而是<script>s。

【讨论】：

【解决方案2】：

所有脚本文件都应该用script标签链接。

<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/bootstrap/js/bootstrap.bundle.min.js">
<script src="/bootstrap/js/bootstrap.min.js">

请确保脚本的文件路径。

【讨论】：