angular_base url和gh-pages上的相对路径

Question

我正在尝试在gh-pages上部署我的项目站点,它是带有webpack的angular2应用程序,我将基本URL设置为我的repo名称,除了模板中的相对路径外,一切都正常加载,这就是我的意思

import {Component} from '@angular/core';

@Component({
  selector: 'header',
  template: `
      <img class="fb-logo" [src]="fbLogo"/>
      <img class="ang-logo" [src]="angularLogo"/>
  `
})

export class Header{

    angularLogo = '../../assets/img/angular-logo.png';
    fbLogo = '../../assets/img/share/facebook.svg';
}

这适用于本地开发,但是当我将它推送到gh-pages分支时它给出了404,因为它试图从根服务器获取它http://myAcc.github.io/assets/img/fbLogo.svg而不是http://myAcc.github.io/myRepo/assets/img/fbLogo.svg

我无法弄清楚如何修复它,所以我尝试使用它作为inline-svg使用 require

angularLogo = require('../../assets/img/angular-logo.png');
fbLogo = require('../../assets/img/share/facebook.svg');

它在本地(使用xss警告)工作正常,但当我部署到gh-pages它时它拒绝运行https.

我该如何解决这个问题？

Answer 1

对于未来的访问者，github 页面部署已从 ng-cli 中删除，并将作为不同的 npm 提供， https://github.com/angular/angular-cli/pull/4385

但看起来现在使用https://github.com/angular-buch/angular-cli-ghpages更轻松地将 Angular 应用程序部署到 github 页面

用法：

ng build --prod --base-href "https://USERNAME.github.io/REPOSITORY/"
angular-cli-ghpages [OPTIONS]

还有一个更短的 ngh 命令可用

ng build --prod --base-href "https://USERNAME.github.io/REPOSITORY/"
ngh [OPTIONS]

Answer 2

问题是你的开发和你的 gh-pages 有不同的根级别，你的开发根 url 必须是这样的：http://localhost:port而你的 gh-page 根是http://myAcc.github.io这就是你的相关图标不起作用的原因。

我猜你有不同的 webpack 配置，将你的生产配置更改为如下所示：

output: {
  path: 'something',
  filename: 'something.bundle.js',
  publicPath: '/myRepo/' // this will add /myRepo/ to all your assets
}

这是关于 publicPath 的快速解释：

输出.publicPath

指定publicPath在浏览器中引用时输出文件的公共 URL 地址。对于嵌入<script>或 <link>标记或引用图像等资源的加载程序，当文件与其在磁盘上的位置不同（由 指定）时publicPath，用作文件的 href或。当您想要将部分或全部输出文件托管在不同的域或 CDN 上时，这会很有帮助。Webpack Dev Server 还使用它来确定输出文件的服务位置。与您一样，您可以使用替换来获得更好的缓存配置文件。url()pathpathpath[hash]

您可以在这里找到更多信息publicPath

更新：

唯一output.publicPath适用于已声明的资产，因为您动态指定您的 img 源，所以它不起作用。您可以使用 file-loader 来为您执行此操作，只需将您的加载程序更改为：

{
  test: /\.(jpg|png|gif)$/,
  loader: 'file?name=/myRepo/[name].[ext]'
},

因此，每当您在代码中需要 a 时，jpg|png|gif它都会添加字符串/myRepo/。

另一个解决方案是创建自定义pipe，因为您使用的是 angular2-webpack-starter ，所以您的构建过程将环境导出到变量ENV，以便您可以将其用于自定义管道，如下所示：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'pathResolver'})
export class PathResolverPipe implements PipeTransform {
  transform(path: string): string {

    return ENV === 'production' ? path.replace(/assets/i, 'myRepo/assets') : path;
  }
}

并在您的组件上使用它，如下所示：

import {Component} from '@angular/core';
import { PathResolverPipe } from 'path/to/pipe';

@Component({
  selector: 'header',
  pipes: [PathResolverPipe],
  template: `
      <img class="fb-logo" [src]="fbLogo | pathResolver"/>
      <img class="ang-logo" [src]="angularLogo | pathResolver"/>
  `
})

export class Header{

    angularLogo = '../../assets/img/angular-logo.png';
    fbLogo = '../../assets/img/share/facebook.svg';
}