AngularJS与Bootstrap文件404报错求助（http-serve环境）

咱们先把问题的根源说透：你设置的npm start脚本是让http-server以./app作为根目录启动的——这意味着服务器只能暴露app文件夹里的内容，上层的node_modules对服务器来说完全是“不可见”的！所以你在index.html里用../node_modules去引用文件，服务器自然返回404，AngularJS加载失败就会触发angular is undefined的错误。

下面给你几个可行的解决方案，按需选择：

方案1：调整http-server根目录到项目根（推荐） #

这个方案不需要复制文件，更简洁高效。修改package.json里的start脚本，把根目录改成项目根目录（也就是restaurant文件夹）：

"start": "http-server -a localhost -p 4000"

然后修改index.html里的引用路径，改用绝对路径（从服务器根目录出发）：

<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="/node_modules/angular/angular.min.js"></script>
<script src="/app.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

之后运行npm start，访问localhost:4000/app/index.html就能正常加载所有文件了。

方案2：复制依赖文件到app目录（适合离线部署场景） #

如果必须让http-server以app为根目录，可以通过npm脚本自动把需要的依赖文件复制到app内：

1. 在package.json里添加prestart脚本（npm会在执行start前自动运行prestart）：

"prestart": "mkdir -p app/vendor && cp -r node_modules/bootstrap/dist node_modules/angular app/vendor/",
"start": "http-server -a localhost -p 4000 ./app"

2. 修改index.html里的引用路径，指向app内的vendor文件夹：

<link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/angular/angular.min.js"></script>
<script src="app.js"></script>
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

运行npm start后，依赖文件会被自动复制到app/vendor下，服务器就能正常访问了。

额外小提醒 #

Bootstrap的JS组件依赖jQuery，如果你需要用到模态框、下拉菜单这类交互功能，记得也要在index.html里引用jQuery，不然这些功能会失效哦~

内容的提问来源于stack exchange，提问作者Ajitesh Chhatani