Vue.js: load js file based on environment

Question

I have some js file which is generated by aws cognito, and its content is different based on environment.
As I should not modify it manually, so vue's environment variables may not work for me.

How should I dynamically load the js file based on the environment?
I use following command to run my server on local

vue-cli-service serve --mode=dev

I located the file under /environment/dev/aws-exports.js

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

and load in the main.js

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

How should I modify my code so that it can load it based on --mode?

Are you sure you need to use vue cli's `mode` for the conditional loading and not `NODE_ENV`? — Brian Lee, May 03 '20 at 08:19
use this link it might help [Link](https://stackoverflow.com/questions/50828904/using-environment-variables-with-vue-js) — Pallav Chanana, May 03 '20 at 08:24
@DigitalDrifter if mode cannot be used, I may use NODE_ENV and doing if else, but I would like to see are there any clearer way — brian661, May 03 '20 at 08:30
@PallavChanana I have read that before and it seem not what i am looking for — brian661, May 03 '20 at 08:31
Here is a nice article, maybe it will help you: https://rangle.io/blog/custom-build-modes-with-vue-cli-3/ — Adam Orłowski, May 03 '20 at 08:39

score 0 · Answer 1 · answered May 03 '20 at 08:44

I am not sure if this is exactly what you are looking for but I'll try to help:

To dynamically load the js file based on the environment you can create a function that returns an import:

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

Note: remember that import is a Promise so you might need to await it.

Vue.js: load js file based on environment

1 Answers1