yeoman webapp子文件夹错误的css路径答案

【问题标题】：yeoman webapp subfolder wrong css pathyeoman webapp子文件夹错误的css路径
【发布时间】：2014-09-30 10:58:20
【问题描述】：

我正在使用 yeoman webapp 生成器 (0.5.0)，我的应用程序目录如下所示：

app/
├── dir1
│   └── index.html
├── favicon.ico
├── images
├── index.html
├── robots.txt
├── scripts
│   └── main.js
└── styles
    └── main.css

在dir1/index.html我刚刚复制了app/index.html的内容并修改了css和js文件的路径。例如来自

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="styles/main.css">

到

<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="../styles/main.css">

使用grunt serve 一切正常，但是当我使用grunt build 构建时，dir1/index.html 中的路径是错误的。从 chrome 开发者控制台我可以看到一些错误：

GET http://127.0.0.1/webapp/dir1/styles/9c307a9d.vendor.css        127.0.0.1/:1
GET http://127.0.0.1/webapp/dir1/styles/84f823a4.main.css          127.0.0.1/:1
GET http://127.0.0.1/webapp/dir1/scripts/db02b173.vendor.js           (index):3
GET http://127.0.0.1/webapp/dir1/scripts/cb7562c6.plugins.js          (index):8
GET http://127.0.0.1/webapp/dir1/scripts/b6c3df09.main.js             (index):8

正确的路径应该是：

http://127.0.0.1/webapp/styles/9c307a9d.vendor.css
http://127.0.0.1/webapp/styles/84f823a4.main.css
http://127.0.0.1/webapp/scripts/db02b173.vendor.js
http://127.0.0.1/webapp/scripts/cb7562c6.plugins.js
http://127.0.0.1/webapp/scripts/b6c3df09.main.js

问题是一些 grunt 任务使用dir1 作为根目录而不是父目录。

我该如何解决这个问题？

【问题讨论】：

标签： html css web-applications gruntjs yeoman

【解决方案1】：

我找到了解决方法！在dir1/index.html 中，我不仅要更改外部文件（css、js）的相对路径，还要更改 grunt 块，例如代码：

<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->

应修改为：

<!-- build:css(.) ../styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) ../styles/main.css -->
<link rel="stylesheet" href="../styles/main.css">
<!-- endbuild -->

【讨论】：

【解决方案2】：

更改为站点相对而不是路径相对

 <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
 <link rel="stylesheet" href="/styles/main.css">

【讨论】：

谢谢，但这并不能解决我的问题。运行 grunt build 后，路径再次变得相对