"base href" 使用 ui-router 在路由 url 中添加目录路径答案

【问题标题】："base href" adds directory path in routing urls using ui-router"base href" 使用 ui-router 在路由 url 中添加目录路径
【发布时间】：2016-10-20 11:41:14
【问题描述】：

总结：

使用<base href="/prod/public/" />时，会在路由url中添加目录路径e.x.http://www.example.com/prod/public/home

我的 Angular 应用托管在 prod/public 目录中。

在我的public/index.html:

<base href="/prod/public/" />

我的路线是这样的：

$stateProvider
     .state('home', {
      url: '/home',
      templateUrl: function($stateParams) {
          var path = 'app/users/views/home.html';
          return path;
      },
      controller: 'HomeCtrl'
})

目录结构：

public_html
      -.htaccess
      - other folders
      - prod
           - public
                - app
                - index.html
           - bower.json
           - .htaccess
           - package.json
           - gulpfile.js
           - Readme.md

.htaccess 在 prod 目录中：

RewriteEngine On
Options -Indexes
RewriteCond %{HTTP_HOST} ^example\.com$ [NC]
RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ public/index.html [L]

这是我在模板中引用状态的方式：

<a ui-sref='home'>Go to home</a>

当点击此链接时，它会重定向到此网址：http://www.example.com/prod/public/home

要求：

网址应该是 http://www.example.com/home 而不是 http://www.example.com/prod/public/home

【问题讨论】：

这就是base href 应该做的。如果您不希望它这样做，请不要使用它...？
为什么要加碱基？
你在使用 Angularjs 的 Html5Mode 吗？通常的 Angular 路由行为缺少哈希。
@Boris 是的，我使用的是 Html5Mode。
@Shreejibawa 需要添加基础以提供应用程序资产的相对路径，因为我从 url 中删除了哈希标签

标签： angularjs .htaccess angular-ui-router ui-sref base-tag

【解决方案1】：

角度路由中的 <base href="/prod/public/"/> 不是设置文档根目录/屏蔽 url，而是在 HTML5 模式下使用定义的 url 预先添加 url。

当您定义路由时，例如/home，角度会正确地将URL 设置为/prod/public/home。如果您希望您的 url 没有该文件夹结构，那么您需要将文件放在根目录中（尤其是在共享主机的情况下）或更改 Nginix / Apache Document 根设置以指向正确的路径。然后，您可以设置这将使您的网址读取为 /home 等

【讨论】：

我需要您对我目前拥有的目录结构的小建议。我用应用程序的当前目录结构更新了问题。请建议我现在必须实施的结构来解决这个问题。