How to run the dist file after vue packaging

In the Vue project, the dist directory is a folder generated after the code is packaged, which contains static resource files and packaged JavaScript, CSS and other files. If you want to run the packaged project file locally, you can use a simple static server to start it.

The following describes a method of using the http-server module in Node.js to build a local server:

1. Confirm that Node.js has been installed, you can execute the following command on the command line to view the version number. If it is not installed, you need to install Node.js first.

   node -v

2. Install the http-server module. Execute the following commands on the command line:

   npm install -g http-server

3. Go to the dist directory. Execute the following command on the command line ( /path/distthe path where the dist directory in your own project is located):

   cd /path/dist

4. Start http-server. Execute the following commands on the command line:

   http-server

5. At this point, a message similar to the following will be output on the command line:

   http://127.0.0.1:8080This means that the server has been successfully started, and you can enter the URL shown in the figure above or etc. in the browser http://192.168.195.1:8080to access the packaged project file.

6. Note that the default port of the http-server module is 8080, if it is already occupied, you can use the following command to specify the port. At this point, the server will start on port 8081.

   ​​​​​​​http-server -p 8081