Question

我使用yeoman webapp generator（0.5.0）和我的app dir看起来像：

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作为根目录而不是父目录。

我该如何解决这个问题？

Answer 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 -->

Answer 2

更改为网站相对而非路径相对

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

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

2 个答案: