Vue Cli 3 browse to dist directory

Question

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?

Do you want specifically your current devServer to serve /dist folder or you are looking for a way to serve these static files to browser your production application? — aBiscuit
Looking for a way to have my devServer serve up the static /dist folder for local testing. We will deploy the /dist folder to an actual web server for production purposes. — xspydr

aBiscuit aBiscuit · Accepted Answer · 2018-10-26T15:09:05

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.

Vue Cli 3 browse to dist directory

1 Answers