vue项目上传Github预览的实现示例

最近在用Vue模仿cnode社区，想上传到github，通过Github页面预览。在这个过程中，我遇到了一些问题，所以我会写一张纸条给你参考。

完成Vue项目后，需要在上传到github之前修改一些配置，通过github页面预览项目。

首先，修改配置

1.解决文件路径问题：

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

清楚地查看构建中的assetsPublicPath(上面还有一个dev，它是开发环境中的一个配置，不需要更改):将“/”更改为。/'

2.背景图片的路径错误

用css写的后台img路径错误。您需要在构建文件夹下找到utils.js并修改位置

在根构建文件夹中打开utils.js文件，并添加publicPath: '././'在下图中标记的位置。

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

在构建文件夹下找到webpack.prod.conf.js文件，在webpack.prod.conf.js的新HtmlWebpackPlugin中找到minify，并将minify中的removeAttributeQuotes: true更改为removeattributequents : false

其次，将项目上传到Github

执行npm运行构建命令来打包项目

如果只想通过github页面预览项目，不想上传整个项目代码，可以直接将dist文件夹中的文件上传到github，然后打开github页面功能预览即可。在dist文件夹下执行以下步骤

1.在github中创建新仓库。2.将dist文件夹中的文件上传到该仓库

Git init git add。git commit -m“描述信息”与远程仓库相关联：git远程添加来源.git push-u origin master如果想同时管理项目和预览项目，可以将整个项目上传到github，然后将dist文件夹中的文件上传到warehouse分支。步骤如下：

1.在github中创建新仓库。2.将整个项目上传到github

Git init git add。git commit -m“描述信息”与远程仓库相关联：git远程添加来源.git push-u原点主控3。然后将远程仓库克隆到本地git克隆中.

4.然后在这个仓库中建立一个分支来生成一个分支gh-pages，并切换到这个分支来进入克隆的文件夹，并执行下面的命令git checkout -孤儿gh-pages

5.删除所有克隆的文件，除了。git文件，然后将打包后在项目根目录下生成的dist文件夹的内容复制到克隆的文件中。依次执行以下命令：git add。git commit -m“描述信息”git远程添加原点.(这一步是根据自己创建的仓库名称编写的)git push -u origin gh-pages(将文件推入仓库，注意分支的名称，而不是主)

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。