记录vue项目deploy到github page
coconutnut
 2022-05-03 20:59:17      

记录一下Data Visualization课程project 初版skeleton部署过程

创建vue工程

参考Vue系列入门教程（6）——vue-cli脚手架

1
2
3
4
vue create dataviz
cd dataviz
npm install
npm run serve

遇到的坑：因为要插图片，打算用plotly生成的html，在vue3中遇到一些奇奇怪怪的问题，最后还是用vue2

发布vue到github page

参考How To Deploy Your Vue App to Github Pages

1
2
3
4
5
6
7
8
git init
git remote add origin ...

npm run build
git checkout -b gh-pages
git add -f dist
git commit -m 'first commit'
git subtree push --prefix dist origin gh-pages

遇到的坑：

  1. 一开始用vue run build产生dist文件，index.html本地打开会有跨域bug。但是发布之后就可以了

  2. 路径问题众说纷纭，最后成功的是

    1
    publicPath: process.env.NODE_ENV === "production" ? "/datavis-project-2022-nomorebugs/" : "/",

Bug: github page上plotly生成的html不显示

原本的资源放在/public/static/world.html

引用时

1
<iframe src="/static/world.html" scrolling="auto" frameborder="0" style="width: 100%; height: 500px;"></iframe>

本地跑没问题，但是放到github page上之后404了

尝试改成

1
<iframe src="static/world.html" scrolling="auto" frameborder="0" style="width: 100%; height: 500px;"></iframe>

本地可以跑

发布，搞定！✌️