angular2 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

我不知道如何修复它所以我尝试使用 require

将它用作 inline-svg

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

它在本地运行良好（带有 xss 警告）但是当我将它部署到 gh-pages 它拒绝通过 https 运行。

我该如何解决这个问题？

Answer 1

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

我猜你有不同的 webpack 配置，把你的生产配置改成这样：

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

下面是关于 publicPath 的快速解释：

output.publicPath

The publicPath specifies the public URL address of the output files when referenced in a browser. For loaders that embed <script> or <link> tags or reference assets like images, publicPath is used as the href or url() to the file when it's different than their location on disk (as specified by path). This can be helpful when you want to host some or all output files on a different domain or on a CDN. The Webpack Dev Server also uses this to determine the path where the output files are expected to be served from. As with path you can use the [hash] substitution for a better caching profile.

您可以找到有关 publicPath here

的更多信息

更新：

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

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

因此，每当您在代码中需要 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';
}

Answer 2

对于未来的访问者，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]

angular2 base url 和 gh-pages 上的相对路径

angular2 base url and relative paths on gh-pages

github-pages

angular

更新：