托管项目时{Anging 2 Webpack Starter文件加载/路径问题

Question

我正在开发一个由Angular 2 Webpack Starter构建的角度2 TypeScript项目。我无法正常托管网站。当我使用npm run server并检查localhost：3000

时，它工作得很好

当我运行npm run server：prod并检查localhost：8080

时，它也很有用

尼斯！

然后我通过Github gh-pages分支主持该网站。我的项目名为“SafeFoods”，gh-pages在地址栏的路径中添加了一个额外的SafeFoods。这个问题是我的文件看起来是在没有SafeFoods的路径上加载的（但在其他方面是相同的）。

我尝试在webpack.common.js文件中更改“baseUrl”，但是当我运行开发服务器和prod服务器时，这会破坏网站！

有谁知道我怎么做才能让网站在所有三种情况下都能运作？ 感谢。

直播主持网站：https://jimtheman.github.io/SafeFoods/ 原始回购：https://github.com/JimTheMan/SafeFoods

Answer 1

我看到你的index.html只包含一个绝对路径的网址

 /assets/icon/apple-icon-57x57.png

您应该只使用相对路径：assets/icon/apple-icon-57x57.png

请参阅“GitHub pages and relative paths”

  

在http://www.foo.com/bar/doc.html的HTML文档中，assets/css/common.css的链接将通过将其附加到HTML文档的网址前缀而不是路径的最后部分来解析（没有doc.html），即链接将解析为http://www.foo.com/bar/assets/css/common.css，而不是您声明的http://www.foo.com/assets/css/common.css。

当然，using Jekyll would be easier：

  

在_config.yml中，将baseurl选项设置为/project-name - 请注意前导斜杠和没有尾部斜杠。

     

现在，您需要通过以下两种方式更改模板和帖子中的链接方式：

     

引用JS或CSS文件时，请执行以下操作：{{ site.baseurl }}/path/to/css.css - 请注意紧跟在变量之后的斜杠（在“path”之前）。

     

执行固定链接或内部链接时，请执行以下操作：{{ site.baseurl }}{{ post.url }} - 请注意两个变量之间没有斜杠。