Question

我正在尝试这样做：

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

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

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

有什么想法吗？

Answer 1

来自Vue environment variable docs：

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

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

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

动态导入组件Vue

2 个答案: