准备-内部图标不显示在nuxtjs3和vuetify3中。

Question

我用稳定的Nuxtjs3创建了一个带有vuetify3模板框架的项目。我可以设置预置图标或内部图标，没有任何显示，与mdi或字体可怕。控制台没有错误，服务器没有错误。我只想在输入表单上添加图标

<template>
<div>
    <v-app id="inspire">
        <v-container fluid fill-height>
            <v-row vertical-align="center">
                <v-col lg="6" sm="12" align-self="center" offset-lg="3">
                    <v-card class="elevation-12">
                        <v-toolbar dark color="success">
                            <v-toolbar-title>Se connecter</v-toolbar-title>
                        </v-toolbar>
                        <v-card-text>
                            <Form as="v-form" @submit="onSubmit" :validation-schema="schema" >
                                <Field name="username" v-slot="{ field, errors }">
                                    <v-text-field
                                        label="Login"
                                        type="email"
                                        v-bind="field"
                                        variant="solo"
                                        append-inner-icon="mdi-magnify"
                                        :error-messages="errors"
                                    ></v-text-field>
                                </Field>
                                <Field name="password" v-slot="{ field, errors }">
                                    <v-text-field
                                        id="password"
                                        prepend-inner-icon="fa:fas fa-lock"
                                        label="Password"
                                        type="password"
                                        v-bind="field"
                                        variant="solo"
                                        :error-messages="errors"
                                    ></v-text-field>
                                </Field>
                                <v-btn
                                    block
                                    color="success"
                                    size="large"
                                    type="submit"
                                >
                                    Se connecter
                                </v-btn>
                            </Form>
                        </v-card-text>
                    </v-card>
                </v-col>
            </v-row>
        </v-container>
    </v-app>
</div>

nuxt js配置

// https://v3.nuxtjs.org/api/configuration/nuxt.config
// @ts-ignore
export default defineNuxtConfig({
runtimeConfig: {
    SECRET: '',
    public: {
        REST_API_URL: process.env.NUXT_REST_API_URL || 'http://localhost:8089/api',
        SUPER_ADMIN_ROLE: 'SUPER_ADMIN',
        KITCHEN_ROLE:'',
        DELIVERY_ROLE:'',
        CASHIER_ROLE:''
    }
},
css: [
    "vuetify/lib/styles/main.sass"
],
build: {
    transpile: ["vuetify"]
},
vite: {
    define: {
        "process.env.DEBUG": false
    }
}
})

插件中的vuetify.js

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'

export default defineNuxtPlugin((nuxtApp) => {
const vuetify = createVuetify({
    components
})
nuxtApp.vueApp.use(vuetify)
})

显示如下：

​

​

在DOM中

​

​

知道吗？

Answer 1

多亏了这个链接question

npm install import @mdi/font

然后在nuxt.config.js中向css字段添加以下条目：

css: ["@mdi/font/css/materialdesignicons.css"]

所以对我来说：

css: [
    "vuetify/lib/styles/main.sass","@mdi/font/css/materialdesignicons.css"
],

它是可以的