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

概述使用：Vue CLI 3.0.0-rc.3 如何配置我的应用程序,它正在加载A)css本身,B)加载在css中的字体和C)来自相对路径的图像,具体取决于应用程序所在的父文件夹？ 我的完整vue应用程序目前正在运行,没有额外的webpack配置文件.我已经知道了,我需要创建一个webpack.config.js,但我不知道哪些插件或配置是必要的. 该应用程序在绝对路径http：whatever.lo 使用：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,}          }      }  }

总结

以上是内存溢出为你收集整理的Webpack和VueJs CLI v3 – 需要图像和Web字体的相对路径全部内容，希望文章能够帮你解决Webpack和VueJs CLI v3 – 需要图像和Web字体的相对路径所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。