Background:
Using VueJS, specifically in regards to PWA template https://github.com/vuejs-templates/pwa
There is a build step npm run build which bundles the project and transpiles any Vue into a distribution browser JS.
The files in /static/ are "static" and just copied into dist, but I am wondering if it's possible to template it at all, or read in some dynamic values.
Question:
Is it possible to have static files that servce under /static in the url, but also during build can accept dynamic values?
More context:
The problem is Vue compiles everything into the dist directory.
All non-static assets are cached and get a unique url each build, whereas static files (I know this is configurable, but you arguably want your non-static assets to have caching) have absolute paths.
Server Routing to map a file in /static/ to a cached dynamic file is outside of Vue. The question pertains to needing to host some "absolute pathed files" (static), but some files might have internally 1-2 urls that need to change in the files depending on what config is used, dev, prod, staging.. just as an example of the use case.
The solution I found was to use CopyWebpackPlugin which comes natively inside build/webpack.prod.conf.js
This is the plugin that copies files from static into dist/static.
You can use the process.env.NODE_ENV to allow you to copy specific files from static into dist.
I decided just to keep environment specific copies of the files with values changed, but you could easily add code to that file to parse and copy over whatever specific files you want.