验证生产与开发中的字体大小不同

Question

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

我不确定这是不是webpack的问题。当我部署时，我使用标准的npm run build。我的视图CLI版本是4.2.2。我使用Material Design spec Roboto Font，这是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覆盖。