Last updated at 2023-10-22

Run Vue Production Dist Directory After Build

AI Status
Last Edit By
Last edited time
Oct 22, 2023 08:38 AM
Oct 22, 2023
When building a Vue application for production, one of the final steps is to run the production dist directory.
This directory contains all the optimized and minified files necessary for the application to run efficiently in a live environment.
To run the Vue production dist directory after build, follow these steps:

Build the Vue application

Before running the production dist directory, you need to build the Vue application using the appropriate build command.
Typically, this command is npm run build or yarn build.
This command will generate a dist directory containing the optimized and minified files.

Serve the dist directory

Once the build is complete, you can serve the dist directory using a web server.
There are many options available for serving static files, such as Nginx, Apache, or even the simple http-server package.
Choose the one that best suits your needs and set it up to serve the dist directory.
For example, if you are using the http-server package, you can install it globally by running npm install -g http-server.
Then, navigate to the dist directory in your terminal and run http-server -p 8080 to start serving the files on port 8080.

Verify the application

Once the web server is running, you can verify that the Vue application is working correctly by accessing it in your web browser.
Open your preferred browser and navigate to http://localhost:8080 (replace 8080 with the port number you specified in the previous step).
You should see your Vue application running in the browser if everything is set up correctly.
By following these steps, you can easily run the Vue production dist directory after the build.
This ensures that your application is optimized and ready to be deployed in a live environment, where it can deliver a fast and seamless user experience.
Remember to update the production dist directory whenever you make changes to your Vue application.
This ensures that the latest version of your application is always available to your users.

Got 404 when Access Vue Route using http-server

If you get 404 not found when trying to access route other than root, then you can try to use serve npm package.
This issue also asked here. You can check it out.
npm install -g serve serve -s dist

Discussion (0)

Related Posts