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

相关推荐