Question

我试图在gh-pages上部署我的项目网站，它是使用webpack的angular2应用程序，我将基本网址设置为我的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而不是{{1}获取它}

我无法弄清楚如何修复它，因此我尝试使用http://myAcc.github.io/myRepo/assets/img/fbLogo.svg

将其用作inline-svg

require

它适用于本地（使用xss警告），但当我将其部署到angularLogo = require('../../assets/img/angular-logo.png'); fbLogo = require('../../assets/img/share/facebook.svg');它拒绝运行https。

如何解决此问题？

Answer 1

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

但是看起来现在使用https://github.com/angular-buch/angular-cli-ghpages

可以更轻松地将角度应用程序部署到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

问题是你的dev和你的gh页面有不同的根级别，你的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

publicPath指定输出文件的公共URL地址   在浏览器中引用时。对于嵌入<script>或。{   <link>标记或参考资源（如图片publicPath）用作   文件的href或url()与文件的位置不同   磁盘（由path指定）。当您想要主持时，这可能会有所帮助   不同域或CDN上的部分或全部输出文件。该   Webpack Dev Server也使用它来确定path所在的位置   输出文件应该从中提供。与path一样，您可以使用   [hash]替换了更好的缓存配置文件。

您可以找到有关publicPath here

的更多信息

更新

output.publicPath仅适用于已声明的资源，因为您动态指定了img源，它将无效。您可以使用文件加载器为您执行此操作，只需将加载程序更改为：

{
  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';
}

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

2 个答案:

更新