动态导入组件Vue

Question

我正在尝试这样做：

import Mainlogo from '@/logos/' +process.env.MAIN_SITE+ '.vue'

所以我可以在我的应用程序中获得一个基于环境的标志，但这不起作用。

语法错误：意外令牌，预期； (96:38)

有任何想法吗？

Answer 1

来自Vue 环境变量 docs ：

请注意，只有以 VUE_APP_ 开头的变量才会被静态嵌入到客户端包中

这意味着如果您想将它们拉入 Vue 应用程序，您想在.env文件中使用的所有自定义变量都必须以VUE_APP_为前缀。 例如：

VUE_APP_SECRET=secret
VUE_APP_TITLE=myapp

然后，您可以在代码中访问它们，例如：

console.log(process.env.VUE_APP_SECRET)

Answer 2

我设法解决了以下问题：

<component :is="mainLogoLoader" class="logo"></component>

computed: {
  mainLogoLoader () {
    return () => import('@/logos/' +process.env.MAIN_SITE+ '.vue')
  }
},

并在 module.exports 中：

MAIN_SITE: '"'+process.env.site+'"'

和我的构建命令：

#site=mysite npm run build