gh页上的angular2基本网址和相对路径 [英] angular2 base url and relative paths on gh-pages

问题描述

我正在尝试在gh-pages上部署我的项目站点，它是带有webpack的angular2应用程序，我将基本url设置为我的存储库名称，除了模板中的相对路径之外，其他所有东西都可以正常加载，这就是我的意思

I'm trying to deploy my project site on gh-pages, it's angular2 app with webpack, I set the base url to my repo name and everything loads fine except the relative paths in the templates, here is what I mean

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

This works well on local dev, but when I push it to gh-pages branch It gives 404 because it's trying to get it from the root server http://myAcc.github.io/assets/img/fbLogo.svg instead of http://myAcc.github.io/myRepo/assets/img/fbLogo.svg

我不知道如何解决它，因此我尝试使用require

I couldn't figure out how to fix it so I tried to use it as inline-svg using require

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

它在本地运行良好(带有xss警告)，但是当我将其部署到gh-pages时，它拒绝通过https运行.

it works fine on local (with xss warnings) but when I deploy it to gh-pages It refuses to run over https.

如何解决此问题?

推荐答案

问题是您的开发人员和gh页的根目录级别不同，您的开发人员根目录网址必须是这样的:http://localhost:port而gh-页面根目录为http://myAcc.github.io，这就是您的相对图标不起作用的原因.

The problem is that your dev and your gh-pages have different roots levels, your dev root url must be something like this: http://localhost:port while your gh-page root is http://myAcc.github.io that's why your relative icons are not working.

我想您有不同的Webpack配置，请将您的生产配置更改为以下内容:

I guess that you have different webpack configs, change your production config to something like this:

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

以下是有关publicPath的简要说明:

Here's a quick explanation about publicPath:

output.publicPath

publicPath指定输出文件的公共URL地址 在浏览器中引用时.对于嵌入<script>或 <link>标签或参考资产(例如图片)，publicPath用作 href或url()到文件的位置与它们在文件上的位置不同时 磁盘(由path指定).当您想要托管时，这可能会有所帮助 其他域或CDN上的部分或全部输出文件.这 Webpack Dev Server也使用它来确定path 预计将提供输出文件.与path一样，您可以使用 [hash]替代以获得更好的缓存配置文件.

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 此处

output.publicPath仅适用于已经声明的资产，因为您正在动态指定img源，因此它将不起作用.您可以使用文件加载器为您完成此操作，只需将加载器更改为:

The output.publicPathonly works with assets that were already declared since you are specifying your img source dynamically it won't work. You can use file-loader to do that for you, just change your loader to this:

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

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

So whenever you require a jpg|png|gif on your code it adds the string /myRepo/.

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

Another solution is creating your custom pipe, since you are using the angular2-webpack-starter your building process exports your environment to the varaible ENV so you can use that for your custom pipe, something like this:

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

像这样在您的组件上使用它:

And use it on your component like this:

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

这篇关于gh页上的angular2基本网址和相对路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！