用 vite 开发定义全局变量答案

【问题标题】：defining global variables with vite development用 vite 开发定义全局变量
【发布时间】：2021-08-14 20:50:54
【问题描述】：

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

如果我没记错的话，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 应用程序中定义一些全局常量和变量，我非常感谢您提供的帮助。

【问题讨论】：

标签： vue.js global-variables vuejs3 vite

【解决方案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

【讨论】：