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

Question

我有一些由 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 加载它？

Answer 1

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

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

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

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