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