Vue3学习笔记02:Vue3打包

一、打包Vue项目

(一)查看Vue项目

  • 在【Vue3学习笔记01】里创建了Vue3项目vue3-demo
    在这里插入图片描述

(二)打包Vue项目

  • 进入项目目录vue3-demo,执行命令cnpm run build
    在这里插入图片描述
  • 执行完成后,会在Vue项目下会生成一个dist目录,该目录一般包含 index.html文件及static目录,里面包含了静态文件jscss以及图片目录 images(可能不存在)。
    在这里插入图片描述

二、打开项目首页

  • 双击打开dist目录里的index.html
    在这里插入图片描述
  • 看到的是一张空白页面
    在这里插入图片描述
  • 查看首页源码
    在这里插入图片描述
  • jscss文件路径修改为相对路径
    在这里插入图片描述
  • 再次打开首页index.html
    在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/howard2005/article/details/124211044