导出的 const 变量在 vue 中未定义

Question

我在一个项目中使用@vue/cli，但我终其一生都无法弄清楚为什么我导出的变量不起作用。这是我的代码设置：

[App.vue]

import {somevar} from './main.js'
console.log(somevar)

[main.js]

import { createApp } from 'vue'
import App from './App.vue'
const somevar = "example"
export {somevar}

createApp(App).mount('#app')

当我运行 npm run serve 时，somevar 只是在浏览器控制台中以未定义的形式返回...？

我尝试使用普通设置（不在 vue 中）来执行此操作，并且它可以工作，所以我认为这是 vue 专门发生的事情？

Answer 1

我认为在 App.vue 中导入 main.js 是不可能的，它本身是在 main.js 中导入的（循环依赖）。

我尝试重新设置您的设置，导致浏览器控制台中出现Uncaught ReferenceError: Cannot access 'App' before initialization（我有一个基于 vite 2 和 vue 3 的项目）。

我建议将常量提取到额外的 javascript 文件中，例如 example.js，然后将其导入 App.vue（如有必要，还可以导入 main.js）。

以下设置适用于我。

[App.vue]

<script setup>
import { somevar } from './example.js'
console.log(somevar)
</script>

[main.js]

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

[example.js]

const somevar = "example"
export {somevar}