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

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

要使web应用程序在每个嵌套文件夹中都能正常工作，您需要从相对的起点加载所有资产。

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

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

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

2(忽略css加载程序中的url路径

为了能够在css中用于图像和字体的url中使用相对路径，您需要避免css加载程序(webpack(试图操纵/控制您使用的url。

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

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

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

Answer 2

您可以使用baseUrl和assetsDir参数

Answer 3

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

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

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