Webpack 和 VueJs CLI v3 – 需要图像和网络字体的相对路径

Question

使用: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/(我只是不知道)。

非常感谢。

Answer 1

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

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,
              }
          }
      }
  }