如何在github中在线预览vue项目

  介绍

如何在github中在线预览vue项目?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

当我们在命令行执行<代码> npm运行构建后,项目的目录下会生成一个<代码> dist 文件夹,它里面又包含一个<代码>静态代码文件夹和一个<代码>索引。> webpack>

<人物>

如何在github中在线预览vue项目”>,</p> <p>我们先尝试在浏览器打开<代码>索引。</html代码> </p> <人物> </图> <p> <img src=或者<代码> src=https://www.yisu.com/zixun/熬蔡??/代码>

是哪里出了问题?其实这跟配置资源的路径有关,打开项目根目录<代码>配置文件夹下的<代码>索引。js代码> 下构建的<代码> assetsPublicPath>

<代码> assetsPublicPath: & # 39;/& # 39; 修改为<代码> assetsPublicPath: & # 39;。/& # 39;

<人物>

如何在github中在线预览vue项目”>,</p> <p>这下可找出原因,因为这里把静态资源路径设置为在根目录下,所以<代码> </代码>脚本标签的引入路径就找不到<代码>静态代码</>文件夹下的文件了</p> <p>重新执行<代码> npm运行构建> </代码,再打开<代码>索引。> </html代码文件</p> <人物> </图> <p> <img src=

好了,现在我们已经可以在<代码> github> dist 文件夹。

疑惑,什么<代码> dist 文件夹要设置不被提交?试想一下,在真正项目开发中,<代码> dist 文件夹中的静态代码 <代码>和<代码>索引。> github 上。

现在还是不能实现项目的线上预览效果,点击项目的<代码>设置> github页

<人物>

如何在github中在线预览vue项目”>,</p> <p>选择<代码> </代码>主分支,保存,接着你会看到项目在线预览链接,点击链接</p> <人物> </图> <p> <img src=如何在github中在线预览vue项目