How to use environment variables with static JS in public folder

Main fact about static files in public folder from docs:

Static assets placed in the public directory will simply be copied and not go through webpack

So, I cannot use .env with static files in public.

I haven't found a perfect solution, but at least 3 acceptable options:

1. JS file as entry, as Jesse Reza Khorasanee said in comments and gave a link to almost same question

The main idea: configure vue.config.js for an additional entry and force webpack to process my file.

// vue.config.js

module.exports = {
  configureWebpack: {
    entry: {
      public: "./public/main.js"
    },
    output: {
      filename: "[name]/[name].main.js"
    }
  }
};

This solution would work with certain features:

• at least two entry points: main entry for my SPA (main.js) and additional entry just for my static JS. It's not good, because processed JS would contain a link to vendors.js chunk as one of the entries. But I need JS file processed by webpack only.

• same output.filename and hash in filename with clear config (it's not work, because I use this script as 3rd party JS and load by static name), or different output.filename for my JS file but with dirty config:

configureWebpack: config => {
        config.output.filename = (pathData) => {
            return pathData.chunk.name === 'myScript'
                ? '[name].js' : '[name].[hash].js';
        };
    ...
}

• If I leave my JS in public folder I get two files after build: one in default js folder with other static assets and another in root folder near main.js

2. Multi-Page Application (configuration for Vue multi-page mode)

module.exports = {
  pages: {
    index: {
      // entry for the page
      entry: 'src/index/main.js',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // when using the entry-only string format,
    // template is inferred to be `public/myScript.html`
    // and falls back to `public/index.html` if not found.
    // Output filename is inferred to be `myScript.html`.
    myScript: 'src/myScript.js'
  }
}

This solution would work almost like the first solution and I get a clear config file. But still I have problem with vendors.js seems like pages option work directly with html-webpack-plugin and I can config chunks which would load with my page, and I tried different ways to setup this option but without success. Vendors is still part of myScript entry.

3. Build JS file as library

I chose this solution in my case. Because it's clear and short.

I put additional script to my package.json: vue-cli-service build --no-clean --target lib --name paysendPaymentLibrary src/payment.js and change main build script.

Final version of package.json:

...
"scripts": {
    "build": "vue-cli-service build && npm run build-library",
    "build-library": "vue-cli-service build --no-clean --target lib --name myScriptLibrary src/myScript.js"
  },
...

After run npm run build I get static files for SPA and three files for my script:

• myScriptLibrary.umd.min.js
• myScriptLibrary.umd.js
• myScriptLibrary.common.js

For 3rd party site I use myScriptLibrary.umd.js file.

If you choose this solution be careful when you build your application, because:

• in Windows vue-cli-service build & npm run build-library scripts would run sequentially, but in Unix it runs in parallel. It can cause deletion of your SPA files. So be sure to use && instead of & (see discussions about environments and parallel\sequential script running)
• size of processed files would be bigger than raw static JS. For example, in my case raw file size: 4 KiB, after build: 15.44 KiB, gzipped: 5.78 KiB.