在github上部署vue.js项目

1.修改打包路径

config文件夹下的index.js文件中buildassetsPublicPath属性改为./(注意不要改成dev的路径)

在github上部署vue.js项目_第1张图片

2.打包

npm run build

3. 上传

将打包生成的dist文件夹中的内容上传到github的一个仓库中,此时仓库目录应如下,index.html在根目录
在github上部署vue.js项目_第2张图片

4. 设置github pages

将对应仓库的settinggithub pages选项的source设为master-branch

在github上部署vue.js项目_第3张图片

5.预览
再回到setting内的github pages选项处,项目的预览链接已经出现辣!

在github上部署vue.js项目_第4张图片

ps:
1.若按以上方法,已有项目打包失败新建项目打包成功却不知道原因,可再建个项目替换其中src文件夹等自己修改过的文件,再尝试打包,可以解决一些疑难杂症(orz我就是这样..)
2.使用这种方法每个项目都得建一个仓库,不太方便,只适合少数项目的临时预览
3.github pages只能显示静态网页,无法做数据交换

你可能感兴趣的:(vue)