【发布时间】：2020-02-26 14:26:49
【问题描述】：
我需要使用 VueJS 构建一个可分发的应用程序。我将描述场景，以便更好地理解。
想象一下：
四家公司拥有相同的产品数据库
他们每个人都有自己的政治、价格、自定义颜色、参数，所有这些也都存储在该数据库中
这 4 家公司希望在其相关网站中集成一个页面，该页面显示他们自己的目录（包含他们的自定义价格和政治等），以及当您单击某些产品时，相关信息关于那个产品
问题是：如何使用 VueJS 制作这样的应用程序？编写一次，然后分发到这 4 个不同的公司网站？
我已经开始回答我的问题了：
我创建了一个可以通过 API Keys 访问的 API
为每家公司分配其自己的 API 密钥，以便使用该 API 密钥的请求与给定公司相关联
我使用 VueCLI 创建了一个应用程序（它使用 vue-router 用于页面/视图，使用 axios 用于API 调用），编写了我所有的逻辑、组件和样式以及其他任何内容……出于开发目的，我尝试使用 4 个 API 密钥之一（将其硬编码到 axios.defaults.headers 中）来查看它是否一切正常……确实如此！
现在，问题来了：我需要以这样的方式构建/导出应用程序：
在 www.company1.com/catalogue 调用 catalogue.js 并将 company1 API 密钥传递给它
在 www.company2.com/catalogue 调用 catalogue.js 并将 company2 API 密钥传递给它
在 www.company3.com/catalogue 调用 catalogue.js 并将 company3 API 密钥传递给它
...我将省略 company4，因为我确定你已经得到了我。
显然我可以用硬编码的 4 个不同的 API 导出 4 个不同的版本……但对我来说这似乎是一个非常愚蠢的想法！此外，它暴露了我的客户很多原因，好吧，每个人都可以链接到一些公司的 catalogue.js，并且无需配置或其他任何东西，就可以在它自己的网站上可视化我的客户产品..（这显然是一个问题）。
我想要：
只有一个 catalogue.js 文件，其中包含一些公开参数，例如：识别公司所需的 API 密钥。
这样，每个人仍然可以使用该 catalogue.js 文件，但使用错误的凭据，它不会产生任何东西（即会收到无法识别 API 密钥的 API 错误）。
我到底应该怎么做呢？
我从 2 周开始就在墙上撞我的头。
我尝试将应用导出为 Library，得到如下错误：Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
我尝试将应用导出为 Web 组件...遇到了同样的错误以及其他错误。
请帮助我了解哪里出了问题，以及我应该如何解决问题。
【问题讨论】：
标签： javascript vue.js