vue项目上传Github预览
发布网友
发布时间：2022-12-07 20:51
共1个回答
热心网友
时间：2023-01-25 04:22
当我们使用了 vue-cli 搭建了自己的项目，最后想上传到Github上进行预览效果，应该怎么操作。
首先完成Vue项目以后，在上传到github之前，需要修改一些配置才能通过github pages预览项目。
打开项目根目录config文件夹下的index.js文件，进行如下修改：
看清楚是 build（上边还有个dev 是开发环境下的配置，不需要改动）下的 assetsPublicPath ：将‘/'改为‘./'
在css中写的background-img的路径出错需要找到build文件夹下的utils.js，修改一下位置。打开根目录build文件夹中的utils.js文件，在下图中标出的位置中添加publicPath: '../../'，
打开build文件夹下webpack.prod.conf.js文件，在webpack.prod.conf.js找到 new HtmlWebpackPlugin 中的 minify ，把minify中的 removeAttributeQuotes: true 改为 removeAttributeQuotes:false
1、进入目录，执行npm run build命令，打包项目
1.在github里面新建一个仓库,
2.将整个项目上传到github,执行以下命令行
现在还是不能实现项目的线上预览效果，点击项目的 setting 项，然后找到 Github Pages
选择 master branch ，保存，接着你会看到项目在线预览链接，点击链接
此时，你会看到页面一片空白，别急，在地址栏后面添加 dist （因为 index.html 是在 dist目录 下），回车，好了，线上页面效果出来了。
（先把本地的 dist 文件夹删除，再上传到 github ，更新 master 分支）
git命令行操作：
这里要选择 gh-pages branch ，再点击连接，如果此时看到空白页面，别急，稍等一会（内容更新需要时间）好了，现在看仓库的 master 分支，不存在 dist 文件夹了，再看线上预览地址，也完美了。
我们先尝试在浏览器打开 index.html
页面显示是空白的？打开控制台，发现script 标签的引入路径好像不对，因为 static 文件夹和 index.html 是在同一个目录下的，这里却是从根目录引入 static 下的文件，正确的路径应该是 ./ 开头的相对路径： src=’./static/…’ 或者 src=‘static/…’。其实这跟配置资源的路径有关，打开项目根目录 config 文件夹下的 index.js ，定位到 build 下的 assetsPublicPath: ‘/’ 修改为 assetsPublicPath: ‘./’
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
