Vue3 Project Build

To build a Vue project, use the following command:

cnpm run build

Executing the above command will produce the following output:

After completion, a dist directory will be generated under the Vue project. This directory typically includes an index.html file and a static directory. The static directory contains static files such as js, css, and an images directory (if there are images).

If you open index.html directly by double-clicking, the page might be blank in the browser. To display it correctly, you need to modify the js and css file paths in the index.html file.

For example, when we open the dist/index.html file, we see that the css and js file paths are absolute:

<link href=/static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=/static/js/app.717bb358ddc19e181140.js></script>
...

We modify the js and css file paths to relative paths:

<link href=static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=static/js/app.717bb358ddc19e181140.js></script>
...

This way, you can double-click the dist/index.html file to see the effect in the browser.