Question

使用：Vue CLI 3.0.0-rc.3

如何配置我的应用程序，它正在加载 A）CSS本身， B）加载在CSS中的字体和 C）图像< / strong>从相对路径取决于应用程序所在的父文件夹？

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

该应用程序当然在绝对路径func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "CellRID", for: indexPath) as! ShoppingCell let item = dataSource[indexPath.row] cell.counter = item.counter cell.callback = ( newValue in item.counter = newValue } return cell }下具有全部功能。

但是我需要完全独立于绝对路径来交付该应用程序，因此客户可以在他想要的文件夹结构下使用它，而我也不知道jet。 http:whatever.local/（我只是不知道）。

非常感谢您。

Answer 1

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

1）完全通往资产的相对路径。

要在每个嵌套文件夹中都具有网络应用功能，您需要从相对的起点加载所有资产。

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

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

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

2）忽略css-loader中的网址路径

要能够在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,
              }
          }
      }
  }

Answer 2

您可以使用baseUrl和assetsDir参数

Answer 3

您可以创建一个名为 vue.config.js 的文件这允许配置公共路径。看看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 –需要图像和Web字体的相对路径

3 个答案: