0

现在我正在为我的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>

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

4

1 回答 1

4

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

例如，要替换 with 的所有实例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>

演示

于 2021-05-26T15:49:39.567 回答