How can we pass parameters to an already built Vue JS app?

Like others have said, you can do this at runtime via a network request. If you don't know where you're deploying to until you're live, you'll need to do something like this.

Alternatively, you can do this at an infrastructure and networking level. Sometimes for A/B testing systems, that's how it's done.

Alternatively, you can do this at build time. I've done both... for static assets like images, sometimes you cannot do this at runtime and you need to replace the public urls at build time. For the network request approach, fetching a static json file with the mappings you host is a definite possibility.

You were very close with the idea of using .env files.

Build-time approach with Vue CLI

In Vue CLI, you get to use the Webpack's DefinePlugin for free by specifying variables in your .env files prefixed as such: VUE_APP_THE_API_URL and then using it like process.env.VUE_APP_THE_API_URL. Docs.

Usage

In your source, use process.env.VUE_APP_THE_API_URL and .env files. Reference your API url in your source code as process.env.VUE_APP_THE_API_URL and then you should use the .env files, like you were planning to, to switch between the dev-only value and a production-only value.

The production-only value is gonna be fake and very unique so that when you find + replace it, it will be distinct.

Find + Replace the fake API_URL you built with

After you're done building your application for production, you're going to loop over a mapping file (json, js, whatever) which contains the API urls you're going to deploy to.

You'll use the filesystem and find + replace to replicate your app as many times as you need before doing a deploy via S3, fastly, etc. You can do this in a bash script or using node + execa or node + fs.

Why you might need to do this

I had to do this at build time because modifying certain assets is not possible at runtime due to optimizations done by webpack loaders where they hard-code things like the public path so it is faster. With hundreds of API/CDN urls, it would be extremely inefficient to rebuild the application over and over.

How Vue CLI does it (if you don't wanna do VUE_APP_*)

Vue CLI is ontop of webpack and this is kind of an advanced use case, so you'll want to set configureWebpack inside of vue.config.js and point that to a require('webpack.config.js') file. You want to do this in Webpack or just within your build process (bash, node, gulp, whatever).

Vue CLI 3 is tied to the major webpack version. Right now that's Webpack 4. I'm going to give you the Webpack 4 answer for your problem, but I think they're changing the plugin name in Webpack v5.

Define Plugin

The plugin you want is the DefinePlugin. Just do the above steps, but you'd be manually setting { plugins: [ new DefinePlugin() ] } with the options you want. You'd do this if you didn't wanna do VUE_APP_* as the prefix to your env variables.

This can be done simply by making an XMLHttpRequest to a URL (e.g., to a local JSON file), and reading the data contents.

For instance, you could use fetch (supported by 95% browsers) to request the config from <projectroot>/config.json (which can be unique to each deployment location), and then set the global properties with the result:

// main.js

fetch('config.json')
  .then(res => res.json())
  .catch(error => {
    // ignore any errors
    console.warn(error)
    return {}
  })
  .then(config => {
    Vue.prototype.ApiBaseUrl = config.ApiBaseUrl
    Vue.prototype.PrintDocsFolder = config.PrintDocsFolder
    Vue.prototype.TicketPrintWSocket = config.TicketPrintWSocket

    // initialize app here
    new Vue(...)
  })

demo

If there are literally 100's of locations where the app is supposed to be deployed with different APIs/params for each location AND YOU DON'T WANT TO LEAVE ANY TRACE OF THE WHOLE DATA apart from the variables which are necessary for proper functioning of the app, I would have personally stored all the different params in one central database and create one single common API which is able to decide which params to feed to which particular deployment. So that at initial app load, the app would just have to make 1 extra API to call to get the correct params. (provided there is some unique identifier for each deployment).

For example, if the unique identifier is the domain name over which the app is served. You can store the params like this in the database:

+-------------------+----------------------------+-----------------+--------------------+--+
| domainName        | ApiBaseUrl                 | PrintDocsFolder | TicketPrintWSocket |  |
+-------------------+----------------------------+-----------------+--------------------+--+
| example.com       | http://api-base-url-1.com/ | print-doc-1     | ticket-print-1     |  |
+-------------------+----------------------------+-----------------+--------------------+--+
| secondExample.com | http://api-base-url-2.com/ | print-doc-2     | ticket-print-2     |  |
+-------------------+----------------------------+-----------------+--------------------+--+
| thirdExample.com  | http://api-base-url-3.com/ | print-doc-3     | ticket-print-3     |  |
+-------------------+----------------------------+-----------------+--------------------+--+

then at app load, you can make a axios (Promise based HTTP client) call and pass the current domain name as a param like this:

const details = await axios.get('/common-api-with-all-the-details', {
params: {
    domainName: location.hostname
});

This common API should match the domain with db and fetch the correct record accordingly.

Advantages:

• You never need to rebuild the app or config the environment variables individually.
• You will always be in control over which params to feed to which particular deployment.
• You can CHANGE/UPDATE the params on the FLY.
• Your whole data store is not public.

Disadvantages:

• Requires one extra server setup.
• 1 extra API call at app's initial load.

Other approaches:

• You can avoid the use of database (if your dataset is not too large) by storing all your details in an array. Then on every COMMON API call, you can match the domain name against the array (lodash can help), thereby increasing response time, lowering complexity and avoiding a database setup completely.

• You can use server-less architecture to avoid setting up a completely new server to host your COMMON API, Firebase Cloud functions or AWS Lambda have generous free tiers to cover a decent amount of traffic.