Vue3 project packaging

Package the Vue project using the following command:

cnpm run build

Execute the above command, and the output is as follows:

When the execution is complete, a dist directory, which generally contains index.html files and static directory, static directory contains static files js, css and picture directory images (if there are anypictures).

If you double-click directly to open index.html the page may be blank in the browser, but you need to modify it to display it normally index.html the path of js and css files in the file.

For example, if we open dist/index.html the file sees 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>
...

Double-click this directly. dist/index.html the file can be seen in the browser.