如何将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)

相关推荐