使用vite开发定义全局变量

Question

现在我正在为我的vue SFC 应用程序使用vite 构建工具。我通过以下链接阅读了 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
            };
        },
        
        methods: {
            nameMethod() {
                
                
                console.log(use here);
                
            }

        } // end of method

    } // end of export
</script>

<style scoped></style>

我在代码中用“use here”声明了想要的地方。另外，如果我可以通过任何其他方式在我的vite vue 应用程序中定义一些全局常量和变量，我非常感谢您帮助告诉我这一点。

Answer 1

define是一个配置，告诉 Vite 如何执行搜索和替换。它只能将一个字符串替换为另一个字符串（不能使用对象作为替换）。

例如，要将所有实例替换appName为"my-custom-name"，请使用以下配置。使用注释（根据文档中的建议）来确保正确引用文字字符串替换。JSON.stringify()

export default defineConfig({
  define: {
    appName: JSON.stringify('my-custom-name')
  }
})

如果App.vue包含：

<script setup>
console.log('appName', appName)
</script>

它将被转换为：

<script setup>
console.log("appName", "my-custom-name")
</script>

演示