Сборка проекта Vue3

Когда вы готовы опубликовать приложение в производственной среде, вам нужно собрать проект Vue.

Используйте следующую команду для сборки проекта Vue:

npm run build

Выполните указанную выше команду, и вывод будет следующим:

После выполнения в проекте Vue будет создан:distкаталог, который обычно содержит файл index.html и каталог static. Каталог static содержит статические файлы js, css и каталог изображений images (если есть изображения).

Если вы напрямую дважды щёлкните, чтобы открыть index.html, страница может отображаться пустой в браузере. Чтобы она отображалась корректно, необходимо изменить пути к файлам js и css в файле index.html.

Например, когда мы открываем файл dist/index.html, мы видим, что пути к файлам css и js являются абсолютными путями:

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

Мы меняем пути к файлам js и css на относительные пути:

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

Таким образом, можно напрямую дважды щёлкнуть файл dist/index.html и увидеть результат в браузере.