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

你可以玩baseUrl and assetsDir个参数

Answer 2

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

1) 资产的相对路径。

要使网络应用程序在每个嵌套文件夹中正常运行，您需要从相对起点加载所有资源。

解决方案： baseUrl = './'（文件夹本身，html 开始加载 vue 应用程序。）

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

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

2) 忽略 css-loader

中的 url 路径

为了能够在 css 中使用的 url 中的相对路径用于图像和字体，您需要避免 css-loader (webpack) 正在尝试manipulate/controll 你用过的 urls.

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

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

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

Answer 3

您可以创建一个名为 vue.config.js 的文件这允许配置 public 路径。看看https://cli.vuejs.org/config/#configuration-reference

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

其中 '/production-sub-path/' 是您应用程序的相对路径

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

Webpack and VueJs CLI v3 – Need relative path for images and web-fonts

relative-path

webpack

vue.js

vue-cli