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

问题描述

使用:Vue CLI 3.0.0-rc.3

Using: Vue CLI 3.0.0-rc.3

如何配置我的应用程序，使其加载A) css 本身、B) 字体 加载在css 中和C) 图像 来自相对路径，具体取决于应用所在的父文件夹?

How can I config my app, that it is loading the A) css itself, B) the fonts loaded in css and C) the images from a relative path depending to the parent-folder the app is located?

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

My complete vue app is currently running without extra webpack config file. I already know, I would need to create a webpack.config.js, but I don't know what plugins or configuration is necessary.

应用在绝对路径http:whatever.local/ 下是全功能的.

The app is full functional under absolute path http:whatever.local/ of course.

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

But I need to deliver the app complete independent from absolute path, so customer can use it under folder structure he wants and I don't know jet. http:customerssite.com/i-dont-know-his-structure/vue-app/ (I just don't know).

非常感谢.

推荐答案

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

The described situation contains two different problems:

1) 资产的相对路径.

要在每个嵌套文件夹中都运行网络应用程序，您需要从相对起点加载所有资产.

To have the web-app functional in every nested folder, you need to load all assets from relative starting point.

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

Solution: baseUrl = './' (the folder itself, were the html starts loading the vue app.)

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

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

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

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

To be able to use relative paths in the urls used in css for images and fonts, you need to avoid that the css-loader (webpack) is trying to manipulate/controll your used urls.

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

Solution: Configure this css-loader with option url: false. And just use the relative url, that starts from the folder were the html starts loading.

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

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

这篇关于Webpack 和 VueJs CLI v3 – 需要图像和网络字体的相对路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！