【发布时间】：2021-08-24 14:20:14
【问题描述】：
我有一个 Vue 组件，我正在使用以下构建命令将其编译为 Web 组件：
npm run build -- --target wc --name projName src\components\server-config.vue
我在我的 Vue 文件中遗漏了一些东西，因为 Web 组件不会呈现字体真棒图标。这是我“npm run serve”时的样子
这是我把它编译成 web 组件并在 demo.html 中打开后的样子：
我发现了几个问题：
- 字体不同
- 缺少用于查看密码的 Eye 按钮
- 缺少复选框（但如果将鼠标悬停在它上面仍会获得发光效果）
- 眼睛图标不见了。 （仅作为 Vuetify 之外的测试包含在内）
如何正确地将字体包含到我的组件中？这是我当前的 vue 文件：
<template>
<div style="text-align: center; font-family: sans-serif">
<v-text-field label="Password" class="mx-4" v-model="password" :type="showPass ? 'text' : 'password'" @click:append="showPass = !showPass" :append-icon="showPass ? 'far fa-eye' : 'far fa-eye-slash'"></v-text-field>
<v-checkbox class="mx-4" v-model="useIntegratedAuthentication" label="Use Integrated Authentication" ></v-checkbox>
<div>
<i class="far fa-eye"></i>
<span>My eye here</span>
</div>
</div>
</template>
<style scoped>
@import '../../node_modules/vuetify/dist/vuetify.min.css';
@import 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900';
@import 'https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css';
</style>
<script src="https://kit.fontawesome.com/XXXXXXXXX.js" crossorigin="anonymous"></script>
<script lang="ts">
import { VTextField, VCheckbox } from 'vuetify/lib';
import vuetify from '@/plugins/vuetify';
import Vue from 'vue';
export default Vue.extend({
vuetify,
components: {
VTextField, VCheckbox
},
data() {
return {
showPass: false,
password: '',
useIntegratedAuthentication: false
};
}
})
</script>
【问题讨论】：
标签： vue.js build font-awesome web-component