vue项目上传Github预览

当我们使用了 vue-cli 搭建了自己的项目，最后想上传到Github上进行预览效果，应该怎么操作。

首先完成Vue项目以后，在上传到github之前，需要修改一些配置才能通过github pages预览项目。

注意事项：以下配置基于vue-cli2，因为vue-cli3之后，由于好多文件已经内置，因此需要查阅官网和网上资料再进行操作！

一、修改配置

1. 解决文件路径问题：

打开项目根目录config文件夹下的index.js文件，进行如下修改：

image

看清楚是 build（上边还有个dev 是开发环境下的配置，不需要改动）下的 assetsPublicPath ：将‘/'改为‘./'

2. 背景图片路径错误：

在css中写的background-img的路径出错需要找到build文件夹下的utils.js，修改一下位置。打开根目录build文件夹中的utils.js文件，在下图中标出的位置中添加publicPath: '../../'，

image

3. 项目打包后dist文件夹下的index.html引入文件没有引号，这里的解决方法是：

打开build文件夹下webpack.prod.conf.js文件，在webpack.prod.conf.js找到new HtmlWebpackPlugin中的minify，把minify中的 removeAttributeQuotes: true改为 removeAttributeQuotes:false

image

二、上传项目到Github

1、进入目录，执行npm run build命令，打包项目

方法一：如果想管理项目的同时又可以预览，可以将整个项目都上传到github，然后将dist文件夹中的文件上传到仓库分支中，步骤如下：

1.在github里面新建一个仓库,
2.将整个项目上传到github,执行以下命令行

git init

---

git add -f .   // (上传后发现没有dist,再执行一次这句git add -f dist)  

---

git commit -m '描述信息'

---

git pull 

---

git push

现在还是不能实现项目的线上预览效果，点击项目的 setting 项，然后找到 Github Pages

image.png

选择 master branch ，保存，接着你会看到项目在线预览链接，点击链接

image.png

此时，你会看到页面一片空白，别急，在地址栏后面添加 dist （因为 index.html 是在 dist目录 下），回车，好了，线上页面效果出来了。

方法二：采用 github 的 gh-pages 分支制作 GitHub Pages ，只把 dist 添加到 gh-pages 分支,这样就把源代码和页面预览文件分开了

在项目的 master 分支上，混合了源代码和页面预览文件，能不能把两者分开？而且还有一个问题， index.html 总是在 dist 路径下的，能不能项目名称直接跟 index.html 。这就是第二种方法

（先把本地的 dist 文件夹删除，再上传到 github ，更新 master 分支）

git命令行操作：

  git run build      
  git branch gh-pages   //创建gh-pages分支
  git checkout gh-pages  //切换到gh-pages分支
  git add -f dist     //强制把dist文件夹提交到github
  $ git subtree push --prefix dist origin gh-pages  //把dist文件夹单独部署到gh-pages分支

image.png

这里要选择 gh-pages branch ，再点击连接，如果此时看到空白页面，别急，稍等一会（内容更新需要时间）好了，现在看仓库的 master 分支，不存在 dist 文件夹了，再看线上预览地址，也完美了。

3、这里解答一下配置修改原因（可看可不看）：

问题1：当我们在命令行执行 npm run build 后，项目的目录下会生成一个 dist 文件夹，它里面又包含一个 static 文件夹和一个 index.html 文件，这是 webpack 最终打包好的文件

image.png

我们先尝试在浏览器打开 index.html

image.png

页面显示是空白的？打开控制台，发现script 标签的引入路径好像不对，因为 static 文件夹和 index.html 是在同一个目录下的，这里却是从根目录引入 static 下的文件，正确的路径应该是 ./ 开头的相对路径： src=’./static/…’ 或者 src=‘static/…’。其实这跟配置资源的路径有关，打开项目根目录 config 文件夹下的 index.js ，定位到 build 下的 assetsPublicPath: ‘/’修改为assetsPublicPath: ‘./’

问题2：本地预览问题解决了，接着我们把项目 push 到 github

dist 文件没有被上传到 github ，怎么回事？找到项目根目录的 .gitignore 文件，这里设置一些文件名，对应的文件将不会被提交到 github 上面，而 dist 被设置在里面，所以就不能上传到 github 上了，我们可以把 dist 从文件里移除。 当然还有另一种办法，就是在操作 git 命令时，把 git add.改为 git add -f dist意思是强制把 dist 文件提交到 github 。

疑惑，为什么 dist 文件夹要设置不被提交？ 试想一下，在真正项目开发中， dist 文件夹中的 static 和 index.html 最终是要被扔到服务器上的，而不是提交到 github 上。

1、参考的原文地址1
2、参考的原文地址2