现在我正在为我的vue SFC 应用程序使用vite 构建工具。我通过以下链接阅读了 vite 的文档：
如果我没记错的话， config中的define选项可以用于定义全局常量。我想要做的是在此选项内的变量中定义我的应用程序的名称，然后在我的 Vue 组件中使用它。但不幸的是，文档中没有关于此选项的代码示例。
我在vite.config.js文件中尝试了以下代码：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
define: {
global: {
appName: "my-custom-name"
}
},
plugins: [vue()]
})我不确定语法和代码是否正确！而且如果它是正确的，我不知道如何在我的 vue 应用程序组件（.vue 文件）中调用（使用）这个常量。例如，我想在此组件的模板或脚本部分中使用它：
<template>
<div class="bgNow">
<p class="color1">
{{ use here }}
</p>
</template>
<script>
export default {
data() {
return {
name: use here …我正在阅读vue 3 的文档，我决定refs在本地开发环境中进行测试。我正在使用 vue 版本并根据vue 官方指南3.2.31设置我的项目。因此，为了在我的组件中测试“refs”，我只需将代码复制并粘贴到这个 vue 网站Playground的URL中。这意味着我的组件的代码是这样的：
<script setup>
import { ref, onMounted } from 'vue'
const list = ref([1, 2, 3])
const itemRefs = ref([])
onMounted(() => {
console.log(itemRefs.value.map(i => i.textContent))
})
</script>
<template>
<ul>
<li v-for="item in list" ref="itemRefs">
{{ item }}
</li>
</ul>
</template>
但在控制台中我收到一个空数组。我是否缺少一些操作来查看标签中文本的输出数组li？