webpack - Webpack和VueJs CLI v3 –需要图像和Web字体的相对路径

使用:Vue CLI 3.0.0-rc.3

如何配置我的应用程序，即它正在加载 A)CSS本身， B)加载在CSS和中的字体C)从相对路径依赖于应用程序父文件夹的图像位于？

我完整的vue应用目前正在运行，没有额外的webpack配置文件。我已经知道，我需要创建一个webpack.config.js，但是我不知道需要什么插件或配置。

该应用程序当然在绝对路径http:whatever.local/下具有全部功能。

但是我需要完全独立于绝对路径来交付该应用程序，因此客户可以在他想要的文件夹结构下使用它，而我也不知道jet。 http:customerssite.com/i-dont-know-his-structure/vue-app/(我不知道)。

非常感谢你。

最佳答案

所描述的情况包含两个不同的问题:

1)相对 Assets 的相对路径。

要在每个嵌套文件夹中都具有网络应用功能，您需要从相对的起点加载所有 Assets 。

解决方案: baseUrl ='./'(文件夹本身是html开始加载vue应用程序的地方。)

此处记录:https://cli.vuejs.org/config/#baseurl

module.exports = {
  baseUrl: './',
}

2)在css-loader 中忽略URL路径

为了能够在css中用于图像和字体的url中使用相对路径，您需要避免css-loader(webpack)试图操纵/控制您使用的url。

解决方案:使用选项url: false配置此css-loader。只需使用相对URL，即从html开始加载的文件夹开始。

此处记录:https://cli.vuejs.org/guide/css.html#css-modules

 module.exports = {
    baseUrl: './',
       css: {
         loaderOptions: {
            css: {
               url: false,
              }
          }
      }
  }