上传Vue项目

一、打包

1.1 npm run build之前需要进行下面的步骤

1.2 修改config

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

将assetsPublicPath: '/'改成assetsPublicPath: './'

重新npm run build

1.3 字体图标无法正常显示

解决方法—：修改build文件

打开根目录下build中的utils.js文件，在控制build样式文件代码中添加
publicPath: '../../'，
重新npm run build

1.4 引用文件没有冒号

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

二、上传

2.1 仅上传dist

如果只是想通过github pages预览项目，不想上传整个项目代码，可以只将dist文件夹下的文件上传到github上，然后开启github pages功能预览。在dist文件夹下执行以下步骤：

1.在github里面新建一个仓库
2.将dist文件夹中的文件上传到这个仓库中

git init
git add .
git commit -m '描述信息'
关联到远程仓库：
git remote add origin ... - git push -u origin master

2.2 上传整个项目

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

首先将整个项目上传到github

1.在github里面新建一个仓库
2.将项目上传到这个仓库中

git init
git add .
git commit -m '描述信息'
关联到远程仓库：
git remote add origin ...
git push -u origin master

3.然后将远程仓库克隆到本地仓库中，在本地仓库新建一个文件夹，在该文件夹中执行以下命令

git clone ...（比如：[email protected]:Loginname/App.git）

4.接着在这个仓库中建一个分支生成分支gh-pages并切换到此分支进入到克隆得到的文件夹中，执行如下命令
-git checkout --orphan gh-pages

5.将克隆得到的文件里面除了.git文件以外的文件全部删掉，再将项目根目录下打包后生成的dist文件夹里面的内容复制到克隆文件中。依次执行以下命令：

git add .
git commit -m “描述信息”
git remote add origin ....（这一步根据自己创建的仓库名来写）
git push -u origin gh-pages （push文件到仓库中,注意后面是分支的名字,不是master）
---另外如果push不成功，可以将命令中的u更改为f，即git push -f' xxx
6.开启github pages功能，点击setting，选择gh-pages branch，由于github提供的地址如下
https://Loginname.github.io/App/，而我们的index.html文件在dist文件夹下，修改地址格式如下https://Loginname.github.io/App/dist/

三、关于git文件不显示问题

进入选中文件夹
-- 点击工具栏的工具选项
--- 选择 文件夹选项，点击查看
---- 选择显示隐藏的文件夹、文件夹和驱动器

上传Vue项目到github并开启gh-page