用 vite 开发定义全局变量

Posted 2023-02-22

【中文标题】用 vite 开发定义全局变量

【英文标题】：defining global variables with vite development

【发布时间】：2021-08-14 20:50:54

【问题描述】：

现在我正在为我的 vue SFC 应用程序使用 vite 构建工具。我通过以下链接阅读了 vite 的文档：

vite config link

如果我没记错的话，config中的define选项可以用来定义global constants。我想要做的是在此选项内的变量中定义例如我的应用程序的名称，然后在我的 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>

我在代码中用 "use here" 声明了想要的地方。此外，如果有任何其他方式可以在我的 vite vue 应用程序中定义一些全局常量和变量，我非常感谢您提供的帮助。

【参考方案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