Bootstrap-vue - 本地服务器和生产服务器之间的颜色和字体差异
Bootstrap-vue - colors and fonts difference between local and production server
我正在本地 Debian Linux 机器上修改 node.js + Vue 2 + Bootstrap-Vue backend/admin 工具（运行ning在 WSL 下，但我认为这无关紧要）。它是现有 git 存储库 Vue 项目的 'add-on'，其中包含面向客户的页面。
我构建 it/webpack 它，压缩它，并将其 scp 到一个纯 Debian 的测试服务器，运行ning Node.js。 Vue 网络应用程序的其余部分与此 'added' Admin.vue 页面之间唯一明显不同的是我通过 [=13= 添加了 bootstrap 和 bootstrap-vue ] 文件，以便它在任何地方都可用，以防我想重新改造站点的其余部分以在以后使用 bootstrap-vue:
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
在我的本地机器上，我看到：
但在测试服务器上，同一页面看起来不同。不同的字体，顶部不同的标签颜色，不同的行距，表单占位符文本为粗体：
我所做的就是解压缩复制过来的 zip。因为有一个 node-express 模块为任何人提供页面服务，所以当我更新它时，新的 html/bootstrap/vue 代码会重新加载。
对 Chrome 的 WhatFont 扩展进行了一些调查，显示了正在使用的不同字体（第一张图片来自我桌面上应用程序的本地主机 运行，通过 Chrome，第二张图片来自远程测试服务器，也可以通过 Chrome 从我的桌面看到）：
该页面在 Edge 和 Firefox 中的行为相同。从本地主机切换到服务器 - BAM！不同的观点（vue？）。
从某种意义上说，我在 Bootstrap 中将所有内容都保留为 'default' - 这似乎使用 SegoeUI 字体作为默认字体，这让人感到困惑。但是一旦代码上传到服务器，就好像字体丢失了一样。我知道我的开发人员桌面上没有 SegoeUI 字体，所以我假设它在 Bootstrap 模块中，“编译”在提供的 app.js 和 chunk.js 文件中向上。当我 grep 搜索构建的代码时，我确实看到 'SegoeUI' 隐藏在混淆代码中。
应用程序的其余部分未受影响 - 尚未 Bootstrap 传播到那里。主要使用 Monserrat 字体，以 Arial 作为后备。
如有任何想法，我们将不胜感激。或者指出我可以四处挖掘的某个地方，看看是否有一些 'development' 与 'production' 标志集（我还没有找到）可能会改变行为。如果有人运行遇到过这个问题，请赐教！提前致谢。应要求提供更多详细信息。
您需要在 public/index 中手动添加所需的字体。html
// index.html
<head>
<!-- ... -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
<!-- ... -->
</head>
并在样式中定义连接的字体。
您可以在任何文件中定义它，具体取决于您的结构。
// example in App.vue
<template>
<!-- ... -->
</template>
<script>
export default {
<!-- ... -->
}
</script>
<style>
body {
font-family: Open Sans, sans-serif;
}
</style>
您也可以下载并本地化connect fonts
您为什么会看到这种行为？显然，库（bootstrap）使用默认字体（系统中的字体），如果其中一个不可用，则使用下一个。我还没有看到确认他正在本地或公开下载。
我正在本地 Debian Linux 机器上修改 node.js + Vue 2 + Bootstrap-Vue backend/admin 工具（运行ning在 WSL 下，但我认为这无关紧要）。它是现有 git 存储库 Vue 项目的 'add-on'，其中包含面向客户的页面。
我构建 it/webpack 它，压缩它，并将其 scp 到一个纯 Debian 的测试服务器，运行ning Node.js。 Vue 网络应用程序的其余部分与此 'added' Admin.vue 页面之间唯一明显不同的是我通过 [=13= 添加了 bootstrap 和 bootstrap-vue ] 文件，以便它在任何地方都可用，以防我想重新改造站点的其余部分以在以后使用 bootstrap-vue:
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
在我的本地机器上，我看到：
但在测试服务器上，同一页面看起来不同。不同的字体，顶部不同的标签颜色，不同的行距，表单占位符文本为粗体：
我所做的就是解压缩复制过来的 zip。因为有一个 node-express 模块为任何人提供页面服务，所以当我更新它时，新的 html/bootstrap/vue 代码会重新加载。
对 Chrome 的 WhatFont 扩展进行了一些调查，显示了正在使用的不同字体（第一张图片来自我桌面上应用程序的本地主机 运行，通过 Chrome，第二张图片来自远程测试服务器，也可以通过 Chrome 从我的桌面看到）：
该页面在 Edge 和 Firefox 中的行为相同。从本地主机切换到服务器 - BAM！不同的观点（vue？）。
从某种意义上说，我在 Bootstrap 中将所有内容都保留为 'default' - 这似乎使用 SegoeUI 字体作为默认字体，这让人感到困惑。但是一旦代码上传到服务器，就好像字体丢失了一样。我知道我的开发人员桌面上没有 SegoeUI 字体，所以我假设它在 Bootstrap 模块中，“编译”在提供的 app.js 和 chunk.js 文件中向上。当我 grep 搜索构建的代码时，我确实看到 'SegoeUI' 隐藏在混淆代码中。
应用程序的其余部分未受影响 - 尚未 Bootstrap 传播到那里。主要使用 Monserrat 字体，以 Arial 作为后备。
如有任何想法，我们将不胜感激。或者指出我可以四处挖掘的某个地方，看看是否有一些 'development' 与 'production' 标志集（我还没有找到）可能会改变行为。如果有人运行遇到过这个问题，请赐教！提前致谢。应要求提供更多详细信息。
您需要在 public/index 中手动添加所需的字体。html
// index.html
<head>
<!-- ... -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
<!-- ... -->
</head>
并在样式中定义连接的字体。 您可以在任何文件中定义它，具体取决于您的结构。
// example in App.vue
<template>
<!-- ... -->
</template>
<script>
export default {
<!-- ... -->
}
</script>
<style>
body {
font-family: Open Sans, sans-serif;
}
</style>
您也可以下载并本地化connect fonts
您为什么会看到这种行为？显然，库（bootstrap）使用默认字体（系统中的字体），如果其中一个不可用，则使用下一个。我还没有看到确认他正在本地或公开下载。