Generate web.config file when running "npm run build"

Question

I have a Vue app served in IIS. I need the dist folder to have a custom web.config file as per instruction here. The problem I have now is whenever I run "npm run build", the whole dist folder gets nuked, and my web.config file is lost, and I need to create one again. Since the file is rather small, this isn't really a big of a deal but I really would like to automate this.

The way I work now is that I go to my test machine, git pull the main dev branch, execute "npm run build", create the web.config file and put it to the dist folder. I'm guessing I can do this in my CI/CD pipeline (I don't have one... yet), but I would like to know if there are any way to do this outside of CI/CD? Any way I can run "npm run build" and it'll automatically generate/copy a web.config file for me?

Answer 1

Vue CLI generated projects are configured to copy anything in the public folder directly into the build output directory (dist by default). They achieve this with the Webpack Copy plugin.

The only exception is the index.html file which undergoes some pre-processing to inject scripts and stylesheets before being copied.

With that in mind, put your web.config file in the public directory and it will be included verbatim in your builds.