我是前端开发的新手，但有后端经验。 我正在尝试使用 vue3 中的 unhead 模块。也许我只是不知道一些众所周知的信息，或者我通常是从错误的推理开始的。
main.ts：
import App from '@/App.vue'
import Config from '@/appConfig'
import router from '@/router'
import axios from 'axios';
import 'normalize.css';
import { createApp, readonly } from 'vue'
import VueLazyload from "vue-lazyload"
import { createHead } from '@unhead/vue'
async function init() {
try {
const {data: config} = await axios.get<Config>('/config.json');
const app = createApp(App);
const head = createHead()
app.use(router);
app.use(VueLazyload);
app.use(head)
app.provide("config", readonly(config))
await router.isReady()
app.mount('#app');
} catch (error) {
console.error('Failed to load config:', error);
}
}
init();
应用程序.vue：
<script lang="ts">
import { useHead } from "@unhead/vue";
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
useHead({
title: "New title",
})
}
})
</script>
<template>
<router-view/>
</template>
<style />
public/index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app"></div>
</body>
</html>
它应该像这样工作吗？ unhead 应该如何更改边界之外的index.html 内容？我还需要这样的index.html吗？
我得到的输出是未更改的 html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script defer src="/js/chunk-vendors.js"></script><script defer src="/js/app.js"></script></head>
<body>
<div id="app"></div>
</body>
</html>
我试图找到一个有效的示例，但在index.html上写满了一些废话，没有提到Head标签（Unheads导出）或类似的东西。
如果您有具体问题，或者“Unhead”与特定库、概念或用例相关，请提供更多信息，我很乐意帮助您解决查询。否则，如果您想询问有关使用 Vue.js 的问题