CODEWITHSUNDEEP
vue.jsvue-cli-3
xspydr
xspydr

Reputation: 3060

Vue Cli 3 browse to dist directory

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?

Upvotes: 4

Views: 3838

Answers (1)

aBiscuit
aBiscuit

Reputation: 4732

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.

Upvotes: 4

Related Questions