如何将VUE项目发布到GitHub上
第一步 打包vue项目
1、使用npm run build
来进行vue项目的打包,打包完成后会出现一个dist
文件夹,打开里面的index.html
文件,我们会发现所有的js,css,img
等路径有问题是指向根目录的,此时我们需要修改config/index.js
里的assetsPublicPath
属性的值,初始值是/
指向项目根目录,改为./
后打包即可
2、此时在从dist
目录下打开index.html
文件就可以正常访问了
第二步 提交代码到GitHub
1、登录GitHub,然后我们创建一个远程仓库,例如testvue
2、将本地项目根目录下的.gitignore
文件里的/dist/
删除,不然/dist/
目录会被git忽略
3、在本地项目根目录右键打开Git Bash Here
,然后通过git命令将打包好的项目提交到刚刚创建的远程仓库:
git init
// 创建本地仓库git add -A
// 将所有文件提交到暂存区git commit -m "testvue"
// 将暂存区文件提交到本地仓库git remote add origin git@github.com:ChenGongWei/testvue.git
// 连接GitHub远程仓库git push -u origin master
// 将本地仓库的文件推送到GitHub远程仓库中
第三步 设置Github Pages
1、进入我们刚刚创建好的GitHub仓库,然后点击setting
进行仓库设置
2、向下滚动找到Github Pages
,点击Choose a theme
选项
3、点击Select theme
对主题进行选择,完成后一个具备远程访问功能的仓库就已经设置好了,可以通过网址进行访问了。
在浏览器中输入网址:https://chengongwei.github.io/testvue/dist/
即可访问到这个仓库的首页
这样就成功把我们的项目挂到GitHub上了。
赞 (0)