Vue项目打包并部署到github

1.打包

Vue项目完成后，运行

npm run build

根目录下生成dist文件，即项目的静态资源。

问题1：项目依赖的js,css等资源路径不正确

解决方法：
修改config下面的index.js

image.png

将build下面的assetsPublicPath修改为'./'

问题2：图标等资源路径错误

解决方法：

image.png

在build目录下的utils.js的这个函数中加上红色方框里的代码。

这时候我们重新运行npm run build,再用浏览器打开dist/index.html即可正常访问。

2. 部署到github

• github上新建一个仓库
• 点击settings,在github pages选择master branch
• 上传dist下面的文件到master仓库，再github该仓库下新建gh-pages分支
• 访问的链接在settings里面可以找到