vue.js - 在 Vue 上构建产品后更改 css 中的 url 路径

Question

我在子域 ex 上托管我的应用程序:https://www.example.com/subdomain/app/在 scss 文件中我有一些字体

    font-family: 'Gibson'
    src: url('/static/fonts/gibson/regular/gibson-regular-webfont.woff2') format('woff2'),
    url('/static/fonts/gibson/regular/gibson-regular-webfont.woff') format('woff')
    font-weight: 400
    font-style: normal

它适用于我的开发环境 localhost:8000/但在我的生产环境(例如:https://www.example.com/subdomain/app/)上它无法加载字体，因为它试图在 https://www.example.com/static/etc 上搜索文件夹路径...

html索引样式为

<link href="/access/app/inside/static/css/app.css" rel="preload" as="style">

我的 app.css 仍然指向

@charset "UTF-8";
@font-face{
font-family:Gibson;
src:url(/static/fonts/gibson/bold/gibson-bold-webfont.woff2)format("woff2")

我不知道这是否可行，或者是否存在在 Vuejs 上管理它的方法。是否可以在构建时更改此 css 路径？我找不到解决方案。谢谢!

Answer 1

您可以使用 sass 和 webpack 进行设置，以使用插件或通过某些自定义函数根据环境变量更改路径。但我认为最简单的方法是使用默认功能，比如将字体放在 Assets 文件夹中，然后当您从那里引用它们时，解析器会自动解析它们。

更新1

在一个新的 vue-cli (v3.4.1) 生成的应用程序中，我将一个字体文件添加到他的 assets 文件夹中。然后将此 scss(对于 sass 应该类似)添加到 App.vue - 链接是相对于应用程序的

<style lang="scss">
@font-face {
  font-family: 'Gibson';
  src: url('./assets/Gibson-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
#app {
  font-family: 'Gibson';
}

无论我使用开发服务器运行应用程序，还是提供构建的 dist 文件夹(作为根或嵌套)，它都有效

更新2

如果 publicPath 不起作用，很可能是因为您在 css 中使用了绝对路径。 从您的路径中删除前导 / 字符

src:url(/static/fonts/gibson/bold/gibson..... 会中断

使用src:url(@/src/static/fonts/gibson/bold/gibson... 或者你需要的任何相对路径

并将您的publicPath设置为/subdomain/app