动态导入组件Vue答案

【问题标题】：Dynamic import component Vue动态导入组件Vue
【发布时间】：2020-06-18 05:24:11
【问题描述】：

我正在尝试这样做：

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

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

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

有什么想法吗？

【问题讨论】：

第 96 行是什么？
那么您是在导入图像（徽标？）还是 vue 文件
我正在导入一个包含 SVG 徽标的组件。

标签： javascript vue.js ecmascript-6 vuejs2 vue-cli

【解决方案1】：

我已经设法解决了以下问题：

<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

【讨论】：

我建议您阅读此内容，以防您的捆绑无法按预期工作。在我的例子中，Webpack 正在创建一个巨大的包，其中包含每个可以导入到你的例子中的文件 process.env.MAIN_SITE。以防万一，也请与webpack-bundle-analyzer 联系。关于动态导入的 Webpack 文档：webpack.js.org/api/module-methods/…

【解决方案2】：

来自Vue environment variable docs：

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

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

VUE_APP_SECRET=secret
VUE_APP_TITLE=myapp

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

console.log(process.env.VUE_APP_SECRET)

【讨论】：

最终目标是通过我的 npm run build 命令设置 process.env.MAIN_SITE。所以 .env 文件不会被使用。