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)资产的相对路径.

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

解决方案：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,}
          }
      }
  }