Question

我在处理网络项目时遇到了令人沮丧的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＆＃34;无法加载资源＆＃34;错误。

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

我有什么不正确的事吗？

Answer 1

应用程序的根目录是“src”文件夹。当您从“../bower_components/”请求bootstrap.min.css时，您告诉浏览器升级1级。因为您已经在应用程序的根目录，“../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文件夹，您仍然可以使用链接从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加载资源

2 个答案: