提供的字体大小与开发版本不同

Question

我正在尝试将一个小型Vuetify应用程序部署到生产环境中，并遇到了奇怪的字体大小问题。我的应用程序在开发中看起来不错，但是当我部署它并在生产中运行它时，我的字体很小。

我不确定这是否是webpack问题。部署时，我正在使用标准的npm run build。我的视图CLI版本是4.2.2。我使用的是Material Design规范的Roboto字体，这是Vuetify的默认设置：https://vuetifyjs.com/en/styles/typography/

否则，我的应用看起来很好，所有其他样式均完美呈现。我没有加载任何不寻常的字体文件，因此我认为这不是相对路径问题。我也将它部署到了根文件夹，而不是子文件夹。

我的大多数样式都是这样

<v-card-subtitle class="font-weight-bold body-1">

我正在部署到IIS 7。

我的package.json非常简单

{
  "name": "vue-ipr",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "dhtmlx-gantt": "^6.3.7",
    "esri-loader": "^2.13.0",
    "vue": "^2.6.11",
    "vue-router": "^3.1.5",
    "vue-videojs7": "^0.1.5",
    "vuetify": "^2.2.11",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-plugin-eslint": "~4.2.0",
    "@vue/cli-plugin-router": "~4.2.0",
    "@vue/cli-plugin-vuex": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.1.2",
    "sass": "^1.19.0",
    "sass-loader": "^8.0.0",
    "vue-cli-plugin-vuetify": "~2.0.5",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.3.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

这是我的vue.config.js

module.exports = {
  "transpileDependencies": [
    "vuetify"
  ]
}

Answer 1

我最终发现，我通过CDN引入的另一个样式表来支持第三方的一个子元素覆盖了HTML根字体的大小，但仅当我为生产而构建时。因此，我所有的Vuetify相对字体大小都受到了影响。我通过在App.vue上为HTML元素添加CSS替代来解决此问题。