导出的 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 运行 serve 时，somevar 在浏览器中返回为未定义控制台…?

我已经尝试使用 vanilla 设置（不是在 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}

exported const variable is undefined in vue