Vue.js：根据环境加载js文件

Posted 2023-02-22

【中文标题】Vue.js：根据环境加载js文件

【英文标题】：Vue.js: load js file based on environment

【发布时间】：2020-08-17 15:38:31

【问题描述】：

我有一些由 aws cognito 生成的 js 文件，其内容因环境而异。 由于我不应该手动修改它，所以 vue 的环境变量可能对我不起作用。

如何根据环境动态加载js文件？ 我使用以下命令在本地运行我的服务器

vue-cli-service 服务 --mode=dev

我找到了 /environment/dev/aws-exports.js 下的文件

const awsmobile = 
    "aws_project_region": "ap-northeast-1",
    ... some more json...
;
export default awsmobile;

并在 main.js 中加载

import config from "./environment/dev/aws-exports"
Amplify.configure(config);

我应该如何修改我的代码，以便它可以根据 --mode 加载它？

【问题讨论】：

您确定需要使用 vue cli 的 mode 进行条件加载而不是 NODE_ENV？

使用此链接可能会有所帮助Link

@DigitalDrifter 如果无法使用模式，我可以使用 NODE_ENV 并执行 if else，但我想看看有没有更清晰的方法

@PallavChanana 我以前读过，这似乎不是我想要的

这是一篇不错的文章，也许对你有帮助：rangle.io/blog/custom-build-modes-with-vue-cli-3

【参考方案1】：

我不确定这是否正是您正在寻找的，但我会尽力提供帮助：

要根据环境动态加载 js 文件，您可以创建一个返回 import 的 function：

function getConfig(mode) 
  return import(`./environment/$mode/aws-exports`)  // import returns a Promise

注意：记住 import 是一个 Promise 所以你可能需要await它。