Angular 2 Webpack初學者文件加載/託管項目時的路徑問題

我正在研究一個由Angular 2 Webpack Starter構建的角2 TypeScript項目。我在現場託管網站時遇到了麻煩。它的工作的偉大，當我使用NPM運行服務器並檢查本地主機：3000Angular 2 Webpack初學者文件加載/託管項目時的路徑問題

而且當我運行NPM運行服務器它的偉大工程：督促和檢查本地主機：8080

不錯！

然後我通過Github gh-pages分支去託管網站。我的項目被命名爲「SafeFoods」，並且gh-pages在地址欄中的路徑中添加了一個額外的SafeFoods。與此問題是，我有文件希望加載在沒有SafeFoods（但在其他方面相同）的路徑。

我試圖在webpack.common.js文件改變「的baseUrl」，但是這打破當我運行開發服務器和督促服務器的站點！

有沒有人知道我可以做到這一點，使網站在所有三種情況下工作？謝謝。

現場的託管網站：https://jimtheman.github.io/SafeFoods/ 原回購：https://github.com/JimTheMan/SafeFoods

來源

2016-09-10 Jimothy

http://stackoverflow.com/questions/35204924/what-is-the-right-way-to-set-a-different-base-for-dev-staging-production – yurzui

@yurzui感謝，但這個鏈接是沒有幫助的。 – Jimothy

我看到你的index.html只包含URL絕對路徑

/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文檔的URL的前綴而得到解決，而無需路徑的最後部分（無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 - 注意斜槓緊跟在變量之後（就在「路徑」之前）。

做永久鏈接或內部鏈接時，請這樣做：{{ site.baseurl }}{{ post.url }} - 請注意，兩個變量之間沒有斜槓。對於試圖

來源

2016-09-10 14:03:18 VonC

這就是我的項目構建方式。我怎樣才能改變它輸出相對路徑而不是絕對的？ – Jimothy

有沒有辦法做到這一點，而不使用Jekyll？ – Jimothy

@Jimothy從你的項目'AngularClass/angular2-webpack-starter /'，你可以嘗試'css-to-string-loader' for webpack：https://github.com/AngularClass/angular2-webpack-starter/issues/730＃issuecomment-229682254 – VonC

Angular 2 Webpack初學者文件加載/託管項目時的路徑問題

回答

相關問題