vue-cli构建的项目在github上的预览问题

voidking 发布于2019-08-22 17:12 / 1758人阅读

摘要：前两天写了一篇关于的小米便签项目实例，有网友建议增加在线预览的效果，然后在上增加可预览项目时遇到并解决一些问题，在这给大家做个分享。

前两天写了一篇关于vuex2.0的小米便签项目实例，有网友建议增加在线预览的效果，然后在github上增加可预览项目时遇到并解决一些问题，在这给大家做个分享。

我的小米便签项目是用vue-cli脚手架构建的，在执行npm run build命令之后会对项目进行编译打包，并在项目中生产dist文件夹，压缩后的文件都在dist文件夹中。

然而，在push项目到github上时发现，dist文件夹并没有上传上去，经过一番摸索之后找到了问题。

忽略文件

对比github上和本地文件之后，发现最重要的dist文件没有被提交到github上，如下图：

dist文件是npm run build执行后被编译打包生成的文件，CSS、JS、图片等文件都在dist文件中，所以该文件必须要提交到github上。

在项目根目录下有一个.gitignore文件，文件中设置一些文件名，对应的文件将不会被提交到github上面。

在.gitignore文件中，有dist等不被上传的文件名称，如下图：

解决方法：把.gitignore文件中的dist文件名删除，然后重新push到github上就有dist文件了。

路径问题

dist文件上传成功后，打开该文件路径下的github pages预览地址，在进行预览的时候又发现一个问题 路径问题。

查看控制台，可以看到文件的路径都出现了问题，如下图:

发现文件的路径都是/根路径,我们总不能把static文件移动到根目路径下吧，那样就太low了。

所以我们要找到配置文件更改下路径，找到config/index.js文件，如下图：

修改图中assetsPublicPath的参数：assetsPublicPath: "./"或者assetsPublicPath: ""，修改后，每次执行npm run build后文件路径将会按照参数生成。

这样设置之后，再次npm run build，重新push到github上面，打开.github.io//dist/index.html就能看到预览页了，我的小米便签预览地址。

总结

这就是我在增加可预览地址时遇到的一些问题，在这分享出来，希望能帮助到需要帮助的人。

来都来了点一下赞吧，你的赞是对我最大的鼓励^_^

混合云专线服务项目搭建在云服务器上的好处访问服务器上的项目么阿里云服务器上的项目怎么更新 webrtc在qt上的实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94962.html

Vue+Express全栈购物商城

摘要：一前言提纲基于和框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。服务端技术栈登录授权用认证机制，来实现登录登出。服务器配置和缓存策略，根据不同的来代理。申请证书全站升级到，配置的协议。一、前言提纲基于Vue和Express框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。二、历史版本基于Vue-CLI2.0:点我查看这个分支版本是一两年前...

Richard_Gao 2019-05-22 18:23 评论0 收藏0
Vue+Express全栈购物商城

摘要：一前言提纲基于和框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。服务端技术栈登录授权用认证机制，来实现登录登出。服务器配置和缓存策略，根据不同的来代理。申请证书全站升级到，配置的协议。一、前言提纲基于Vue和Express框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。二、历史版本基于Vue-CLI2.0:点我查看这个分支版本是一两...

luzhuqun 2019-08-26 13:50 评论0 收藏0
vue项目打包后上传至GitHub，并实现github-pages的预览

摘要：项目打包后上传至，并实现的预览打包项目项目命令行输入打包命令，生成了文件夹打包完成。参考各位大佬求教一个问题项目打包后如何上传到实现预览上传本地项目到和预览使用数据怎么加载本地数据能让项目在上预览 vue项目打包后上传至GitHub，并实现github-pages的预览 1. 打包vue 项目 vue项目：showImg(https://segmentfault.com/img/bVb...

wangdai 2019-08-23 17:17 评论0 收藏0
vue服务端渲染demo将vue-cli生成的项目转为ssr

摘要：无需使用服务器实时动态编译，而是使用预渲染方式，在构建时简单地生成针对特定路由的静态文件。与可以部署在任何静态文件服务器上的完全静态单页面应用程序不同，服务器渲染应用程序，需要处于运行环境。更多的服务器端负载。目录结构 -no-ssr-demo 未做ssr之前的项目代码用于对比 -vuecli2ssr 将vuecli生成的项目转为ssr -prerender-demo 使用prer...

whinc 2019-08-22 16:07 评论0 收藏0
第三方库

摘要：微信支付，支付宝支付，银联支付三大支付总结支付宝植入总结支付宝的植基于和百度地图的组件库基于百度地图封装的组件库，使用这个库最好需要先了解和百度地图。 Commento - 多说 & Disqus 开源替代品 Commento - 多说 & Disqus 开源替代品 anime.js 简单入门教程强大轻量的动画库 anime.js 入门教程来自B站的开源的MagicaSakura源...

seanHai 2019-08-22 13:58 评论0 收藏0