Vue-Cli - How to load external files (out of root) in index.html

Question

First of all, I have a folder structure like this (and can't modify):

|- base_shared
|- controls
|- .js files
|- libs
|- .js files
|- Project A (created with Vue-Cli)
|- Project B (created with Vue-Cli)

Inside base_shared folder we store all of our files that need to be shared with all projects, it includes libs, UI controls, etc... Those are, in majority, .js files and don't have any kind of export default or similar, since they are simple.js. Those files are frequently modified and frequently there are new files added in base_shared that all projects can consume.

Folders Project A/B are Vue-Cli created projects, with own vue.config.js, routes and .vue components. In each project we have a public/index.html file. Here we load big part of our libraries, .css and.js files. (not using import() , but using <script src=...> in the head)

My question is:
How can I load files that are out of the <%= BASE_URL %> (in this case, files from base_shared ) in the index.html of each project? All those files need to be globally accessible in all parts/views/components of the project during runtime.

I tried many things like:
src="../base_shared/controls..."
src="<%= BASE_URL %>../base_shared/controls...
but obviously it won't work since it is out of root/host scope (let's assume for now that host is http://localhost:8081/) I'm also using in vue.config.js the webpack with a resolve.alias to as '@base': path.resolve(__dirname, '../base_shared')

I'm used to IIS servers where I can create a "Virtual Directory" to point to base_shared and then use it in my project like the folder was inside the project root (when it is not, it's virtual)

There's something like that in Vue/Node? Can I configure a virtual path? Or I need to rethink the idea?

Answer 1

Did you try to set this into your vue.config.js?

const path = require('path')

module.exports = {
    chainWebpack: config => {
        config.resolve.alias
            .set('libs', path.resolve(__dirname, '../base_shared/'))
    }
}

Them you use an import.... from.... into your script block.

<script>
   import { packagename } from "packagefolder/package.js"
   import 'packagefolder/css/package.css'

   export default {
       ...       
   }
</script>