Webpack和VueJsCLIv3-需要图像和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)资产的相对路径.

要使Web应用程序在每个嵌套文件夹中都起作用,您需要从相对起点加载所有资源.

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

记录在这里:https://cli.vuejs.org/config/#baseurl

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

2)忽略css-loader中的url路径

为了能够在css中使用的URL中使用相对路径来获取图像和字体,您需要避免css-loader(webpack)试图操纵/控制您使用过的URL.

解决方案:使用选项配置此css-loader url: false.并且只使用相对url,从文件夹开始是html开始加载.

记录在这里:https://cli.vuejs.org/guide/css.html#css-modules

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