距离第一次接触vue已经过去了很长一段时间,现在再来看vue发现已经可以说是面目全非了,基本上都不一样了,比起第一次用vue,这次用更加"前端"的方式来重新学一下vue

目标

这次对vue的再学习,目的是给DMIs的一个json订阅接口写一个配套的页面,生成一个纯静态的页面,可以直接被Github Pages、Cloudflare Pages或nginx部署。

开始

这次是用vite来作为前端构建工具,vitevue的作者写的,用起来应该比同类的更好用。

安装vite

npm install -g vite

使用vite初始化项目(通过yarn)

yarn create vite

按照提示选择vue项目即可

然后会在当前目录下生成一个新的项目,这个项目的目录结构是这样的:

tmp/
├── index.html
├── package.json
├── public
│   └── vite.svg
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── vue.svg
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   └── style.css
└── vite.config.js

其中源代码在src目录下面,项目根目录的index.html是项目的入口文件,package.json是项目的配置文件,README.md是项目的说明文件,vite.config.js是项目的配置文件。

然后就可以写vue代码了。具体的vue可以参见vue文档

在Cloudflare Pages上部署

首先确认vue代码是否能正确编译出静态文件,如果可以,就可以进行部署了。

按照cloudflare的操作提示,将账号与github或者gitlab上的项目进行关联,这样在存储库上的内容更新后几个自动触发cloudflare pages 的更新与部署。

对于构建命令,如果没有太过复杂的东西可以直接npm run build,项目的根目录与构建输出目录vite.config.js保持一致即可。

对于单页应用(SPA),Cloudflare Pages会将404内容自动重定向到项目的入口index.html,如果cloudflare pages没有正确识别出这是一个SPA,会逐级寻找404.html并返回,所以还可以手动在index.html创建一个404.html,内容与index.html一致,然后在vite.config.js里将404.html也设置为入口文件,这样万一没能识别出SPA,也会返回404.html的内容,利用vite的多入口功能,这样就不影响正常使用了。

一旦设置完成,在对应的分支更新代码后,应该就会触发cloudflare pages的更新与部署了,cloudflare pages会提供一个免费的*.pages.dev的域名,同样也可以用自己的域名来部署。