将 Lovable 创建的网站代码发布到 GitHub,下载到本地并在 Windows Server 2016 上通过 IIS 部署,整体流程非常清晰。
由于 Lovable 项目通常是基于 React / Vite 开发的前端单页应用(SPA),你不能直接将源代码中的 .tsx 或 .vue 放到 Windows 服务器上运行,需要先编译打包(Build)成静态 HTML/CSS/JS 文件。
以下是完整的详细指导方案:
第一步:将 Lovable 网站发布/导出到 GitHub
在 Lovable 中连接 GitHub:
打开你在 Lovable.app 中的项目。
点击右上角的 “Share” 或 “GitHub”(或项目设置中的 GitHub Integrations)按钮。
如果是首次使用,授权连接你的 GitHub 账号。
推送代码:
选择 “Create a new repository”(创建新仓库),输入仓库名称(例如 my-web-app)。
点击 “Push to GitHub”。Lovable 会自动将项目代码同步到你的 GitHub 个人仓库中。
第二步:将代码下载(Git Clone)到本地电脑
前置条件:你的本地电脑需要安装 Git 和 Node.js(建议选择 LTS 版本)。
打开命令行:
在本地电脑按 Win + R,输入 cmd 或 powershell 并回车。
克隆仓库到本地:
Bash
git clone https://github.com/你的GitHub用户名/你的仓库名.git进入项目目录:
Bash
cd 你的仓库名
第三步:在本地打包编译生成 HTML 静态文件
安装依赖包:
Bash
npm install执行打包命令:
Bash
npm run build获取打包产物:
打包完成后,项目根目录下会生成一个名为 dist(或 build)的文件夹。
这个 dist 文件夹内部包含的就是编译好的 index.html 以及 assets 静态资源文件。这才是你需要部署到服务器上的核心文件。
它使用 TanStack Start,目前默认构建的是 Cloudflare 服务端程序,所以 .output 里没有 index.html,并不是构建失败。
你目前只有一个首页,适合生成静态 HTML,再上传到 Windows Server 2016 的 IIS。
1.开启 HTML 预渲染
打开 [vite.config.ts](D:/BriteCard/britecard/vite.config.ts),改为:
import { defineConfig } from "@lovable.dev/vite-tanstack-config";
export default defineConfig({
tanstackStart: {
server: { entry: "server" },
prerender: {
enabled: true,
autoSubfolderIndex: true,
crawlLinks: true,
failOnError: true,
},
},
});这会让构建过程额外生成静态 HTML,配置依据是 TanStack 官方预渲染文档。
然后在 PowerShell 执行:
cd D:\BriteCard\britecard
npm run build
Get-ChildItem .output -Recurse -Filter *.html预计首页会生成在:
.output\public\index.html**确认 HTML 已生成且构建成功后再上传。**这里给出的是配置步骤,我尚未修改或重新构建你的项目。
2.上传整个静态目录
把 .output\public 里面的全部文件和文件夹上传到服务器,例如:
C:\inetpub\britecard\
├── index.html
├── assets\
├── favicon.ico
└── robots.txt不能只上传 HTML:页面还需要 assets 中的 JavaScript 和 CSS。静态部署无需上传源码、node_modules 或 .output\server,服务器也无需运行 npm。
第四步:部署到 Windows Server 2016 服务器(基于 IIS)
Windows Server 2016 自带了 IIS (Internet Information Services) Web 服务器,是部署静态网站的最佳方式。
1. 将 dist 文件夹传输到服务器
将本地生成的 dist 文件夹压缩,或者直接通过远程桌面(RDP)复制粘贴到 Windows Server 2016 的磁盘中(例如:C:\inetpub\wwwroot\my-website)。
2. 在 Windows Server 2016 上开启并配置 IIS
安装 IIS 角色(如果尚未安装):
在服务器上打开 Server Manager(服务器管理器)。
点击 Add roles and features(添加角色和功能)。
一路下一步,在“Server Roles(服务器角色)”勾选 Web Server (IIS) 并完成安装。
创建 Web 站点:
按 Win + R 输入 inetmgr 打开 IIS 管理器。
在左侧树状菜单展开,右键点击 Sites(网站) 选择 Add Website(添加网站)。
Site name(网站名称):输入你的项目名(如 MyWebSite)。
Physical path(物理路径):选择你刚刚放置的 dist 文件夹路径(例如 C:\inetpub\wwwroot\my-website)。
Binding(绑定):
Port(端口):默认 80(如果冲突可改为其他端口如 8080)。
Host name(主机名/域名):绑定你的解析域名;若暂时没有域名,留空使用 IP 访问即可。
点击 OK 保存。
3. 配置 SPA 路由重定向(解决刷新 404 问题)
由于 React / Vite 应用使用了前端路由,如果访问子页面刷新可能会出现 404 错误。你需要让所有请求都指向 index.html。
在服务器上的 dist 文件夹根目录下,新建一个名为 web.config 的文件,写入以下内容:
XML
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="React Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_DIRNAME}" matchType="IsFolder" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
(注:要使该规则生效,需在服务器 IIS 中安装 URL Rewrite 模块)。
4. 放行防火墙端口
打开服务器的 Windows Firewall(高级安全 Windows 防火墙)。
在 Inbound Rules(入站规则) 中,新建规则,放行你设置的端口(如 TCP 80 或 8080)。
如果使用的是云服务器(如阿里云、腾讯云、AWS),还需在云控制台的 安全组 (Security Group) 中添加对应的入站许可。
总结流程图
$$\text{Lovable.app} \xrightarrow{\text{Export/Push}} \text{GitHub} \xrightarrow{\text{Git Clone}} \text{本地电脑} \xrightarrow{\text{npm run build}} \text{dist 静态包} \xrightarrow{\text{传输与配置}} \text{Win2016 IIS}$$
