javascript - 即使文件路径正确，也无法从 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“无法加载资源”错误。

../语法似乎是正确的，我的控制台显示它正在 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.