vite development定义全局变量

Question

现在我正在为我的 vue SFC 应用程序 使用 vite 构建工具。我用下面的 link 阅读了 vite 的文档：

如果我没记错的话，配置中的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 或 script 部分使用它：

<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>

我在代码中用 “在这里使用” 声明了需要的地方。而且，如果有任何其他方法可以在我的 vite vue 应用程序中定义一些全局常量和变量，我非常感谢你帮助我告诉我这件事。

Answer 1

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

例如，要将 appName 的所有实例替换为 "my-custom-name"，请使用以下配置。 注意 JSON.stringify() 用于（根据 recommendation in the docs）以确保正确引用文字字符串替换。

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>

demo

vite development定义全局变量

defining global variables with vite development

global-variables

vue.js

vuejs3

vite