##2024/9/24 21:51:48:

基于 vite react tailwind 项目并部署到 cloudflare

部署后的项目地址：
https://react-app-tailwind.pages.dev/

github 地址：https://github.com/qyzhizi/js-logical/tree/main/2024-09-24-react-tailwind-vite-project

build:

npm install
npm run build

dev:

npm run dev

部署到 cloudflare ：
把本项目上传到 github 的一个仓库，然后登录 cloudflare 网页端，进入 page 配置页面，如果是私有仓库先添加该github仓库的权限，然后进行配置：

构建命令：
npm run build
构建输出目录：
/dist

配置后就可开始部署，部署成功后，进入网页地址查看：
部署后的项目地址：
https://react-app-tailwind.pages.dev/

@@ index.html 解释

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sombex Demo</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

这里 src/index.html 需要注意 <script type="module" src="/src/main.jsx"></script>
这一行不可少，因为 vite 会检查 index.html 文件是否存在，该文件是 vite 构建的入口，所以，index.html 需要关联 main.jsx 才可以进行完整的构建，否者构建的出来的内容是空的。

package.json scripts 命令：

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },