即使文件路径正确，也无法从 bower_components 加载资源

Question

我在处理 Web 项目时运行遇到了一些令人沮丧的 404 错误。我正在为我的 CSS 和 JS 文件使用此文件结构：

bower_components
    bootstrap
        |dist
            |css
               | bootstrap.min.css
    angular
        |angular.min.js
    jquery
        |dist
            |jquery.min.js
dist
lib
    |farbtastic.js
node_modules
src
    |img
    |styles
    |scripts
    |view1
    |view2
    |index.html //running browserSync from this folder using this file as index

当我尝试使用适当的语法引用 index.html 中的文件时：

<link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">

我收到 404 "Failed to load resource" 错误。

../ 语法似乎是正确的，我的控制台显示它正在 http://localhost:3000/bower_components/bootstrap/dist/css/bootstrap.min.css 中查找正确的位置。

我有没有做错什么？

Answer 1

您的应用程序的根目录是 "src" 文件夹。当您从“../bower_components/”请求 bootstrap.min.css 时，您是在告诉浏览器向上一级。因为您已经位于应用程序的根目录，所以“../bower_component”本质上与 "bower_component".

相同

您可以：

1. move your index.html 1 level up
2. move your bower_components inside src
3. have some kind of build(gulp/grunt) to reorganize them in a way where the bower_components is within the root folder.

Answer 2

由于您的应用程序的根目录是 src 文件夹，您仍然可以使用 link

从 bower_components 加载

<link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">

这样配置你browserSync.init

browserSync.init({
        server: {
                baseDir :"src",
                routes:{
                    "/bower_components" : "bower_components"
                }
        }

即使文件路径正确，也无法从 bower_components 加载资源

Failed to load resource from bower_components even with correct file path

html

javascript

css

browser-sync