I have a Vue Cli 3 app which, when built, creates a bundle of web components in the "dist" directory.
I'm looking for a way to be able to browse the files within the "dist" directory when running npm run serve, which starts the webpack dev server.
When I do this now (i.e., something like browse to http://localhost:8083/dist/component.js), I'm simply presented with the index.html file found in the public directory.
How can I configure via the vue.config.js file the ability to have the devserver serve up files in the "dist" directory?
devServer is intended to provide development environment with configurations to apply certain loaders, plugins, etc. What you are looking for is a way to serve locally hosted files as a working application. These are two different purposes and I would not recommend adjusting devServer config for such purpose.
There are easy ways to serve static files on local machine. One of the simplest is to use live-server, serve or similar.
In order for it to work with live-server just few steps are required:
1) Install
npm install -g live-server
2) In terminal navigate to the folder where static files are located (e.g. project-folder/dist/
3) Run live-server command.
This will open a browser tab with index.html as an entry point and will simulate a webserver on a local machine. There are many more options available in docs.
But this will serve the purpose and will not interfere with devServer purpose.