Question

使用$location html5模式的一个角度应用，位于app子目录中。

当用户在子页面（/ thing / 123）上进行直接访问时，angular会给出错误的css URL。

例如：css的路径为site.com/app/css/styles.css，但当用户直接访问site.com/app/thing/123时，此页面会调用错误的css路径：site.com/app/thing/css/styles.css。就像angular正在寻找相对于当前URL的css。奇怪的是，同一页面上的javascript文件路径是正确的（site.com/app/js/scripts.js）。

但是，此问题仅适用于直接访问子页面。从site.com/app/things访问并导航到site.com/app/thing/123时，正确加载了css。

在index.html中，css链接标记如下：

<link rel="stylesheet" href="css/styles.css"/>

要解决这个问题，我可以设置一个绝对的css路径：/app/css/styles.css，但我宁愿保持它相对于app目录。

.htaccess：

Options +FollowSymLinks

<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteCond %{REQUEST_URI} !.*\.(js|html|png|css)
    RewriteRule (.*) index.html [L]
</ifModule>

我如何解决这个错误的CSS路径？

Answer 1

我发现在使用/解决问题

之前将路径添加到样式表

<link rel="stylesheet" href="/css/styles.css"/>

Answer 2

这对我来说很有用，还有像上面这样的htaccess：

设置基本网址，可能位于基础index.html：

<base href="/">
使用以/开头的路径导航相对基本网址

<link rel="stylesheet" href="/css/styles.css"/>

angularjs：直接访问时错误的css路径

2 个答案: