Angular 2 base_href 链接资产问题

Question

我正在为我的项目使用 laravel 5.3 和 angular 2，并使用 webpack 编译资产，包括 js and css。

我正在尝试对客户区和管理区使用相同的 font awesome and bootstrap。

我有 laravel 的文件夹结构，所有内容都在 js directory 中。

|-public
   |-js
      |-assets
         |-fontawesome-webfonts.woff
         |-image1.png
      |-vendor.bundle.js
      |-polyfill.bundle.js

对于 Angular 2 条路线，我们需要将 base href 添加到我也添加的主模板中。

<base href="/">

管理员 url 是 localhost:8000/admin

并且用户 url 是 localhost:8000

我已经包含了像

这样的捆绑包

{!! Html::script('js/vendor.bundle.js') !!}

并且供应商已将 less 文件导入为：

vendor.bundle.js

import  'admin-lte/build/less/AdminLTE.less';
import  'font-awesome/less/font-awesome.less';

主要问题是，当我对用户页面和管理页面使用相同的 vendor.bundle.js 时，用户页面工作正常，因为它从 js/assets/fontawesome-webfonts.woff 加载字体，但是当我加载管理页面它无法加载字体，因为它从 admin/js/assets/fontawesome-webfonts.woff 搜索，这不是正确的目录。

如何让 Angular 在 js/assets/fontawesome-webfonts.woff 中同时搜索 url？

问题也显示在图像中。

Answer 1

我只是用 url-loader webpack plugin.

自己弄明白了

您应该保持基本 href 不变并配置资产。

我只需要为 fonts

添加一个新测试

{
    test: /\.(svg|woff|woff2|ttf|eot)$/,
    loader: 'url-loader?limit=10000&name=assets/[hash].[ext]&publicPath=/js/'
}

您需要指定 publicPath 并将其他目录添加到 name。

就是这样。希望它能节省一些人的宝贵时间。

注意：不要忘记public路径前面的'/'

Angular 2 base_href 链接资产问题

Angular 2 base_href linking assets issue

assets

relative-path

laravel

webpack

angular