时间戳

首页 > 解决方案 > 在 Vue 上构建产品后更改 css 中的 url 路径

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

问题描述

我将我的应用程序托管在子域前：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 路径？我找不到解决方案。谢谢！

标签： vue.jswebpack

解决方案

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

更新 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

推荐阅读