AI 水务前端环境搭建

环境要求

在开始之前，请确保您的系统满足以下要求：

Node.js >= 16.0.0
npm >= 7.0.0

1. 安装 Node.js 环境

如果您还未安装 Node.js，请参考 NVM及NODE开发环境搭建进行安装。

验证安装：

node -v
npm -v

2. 克隆项目

git clone https://github.com/znlgis/ai-water-front.git
cd ai-water-front

3. 安装依赖

npm install

4. 配置环境变量

4.1 Dify AI 配置

项目集成了 Dify AI 平台，需要配置 API Key。

访问 Dify 官网或自建 Dify 服务
创建应用并获取 API Key
在项目根目录创建或编辑 .env.local 文件：

# Dify AI 配置
VITE_DIFY_API_KEY=你的Dify_API_Key

# 可选：自定义 Dify 服务地址（默认为 https://api.dify.ai）
VITE_DIFY_BASE_URL=https://api.dify.ai

注意：

如果使用自建 Dify 服务，请将 VITE_DIFY_BASE_URL 修改为你的服务地址
API Key 请勿提交到公开仓库

4.2 GeoServer 配置

项目配置了 GeoServer 代理，在 vite.config.js 中：

// GeoServer认证配置
const AUTH = {user: "admin", pass: "geoserver"};

proxy: {
  "/geoserver": {
    target: "http://127.0.0.1:8765/geoserver",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
      Authorization: `Basic ${AUTH_BASE64}`,
    },
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/geoserver/, ""),
  },
},

修改 GeoServer 配置：

修改 target 为你的 GeoServer 地址
修改 AUTH 对象中的用户名和密码
如需修改端口，编辑对应配置

4.3 安装 GeoServer（可选）

如果需要本地 GeoServer 服务，可以使用 Docker 安装：

# 安装 PostGIS（数据库）
docker pull postgis/postgis
docker run -d -p 5432:5432 --name postgis \
  -e POSTGRES_PASSWORD=postgres \
  -e PGDATA=/var/lib/postgresql/data/pgdata \
  -v //d/docker/data/postgis:/var/lib/postgresql/data \
  postgis/postgis

# 安装 GeoServer
docker pull kartoza/geoserver
docker run -d -p 8765:8080 --name geoserver \
  --link postgis:postgis \
  -e SAMPLE_DATA=true \
  -e GEOSERVER_ADMIN_PASSWORD=geoserver \
  -e GEOSERVER_DATA_DIR=/data/geoserver/data_dir \
  -v //d/docker/data/geoserver:/data/geoserver/data_dir \
  kartoza/geoserver

安装完成后访问 http://localhost:8765/geoserver 即可使用。

5. 项目配置说明

5.1 Vite 配置

配置文件： vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import base64 from 'base-64'

// GeoServer认证配置
const AUTH = {user: "admin", pass: "geoserver"};
const AUTH_BASE64 = base64.encode(`${AUTH.user}:${AUTH.pass}`);

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,        // 开发服务器端口
    open: true,        // 自动打开浏览器
    proxy: {           // GeoServer 代理配置
      "/geoserver": {
        target: "http://127.0.0.1:8765/geoserver",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          Authorization: `Basic ${AUTH_BASE64}`,
        },
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/geoserver/, ""),
      },
    },
  },
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: false
  }
})

5.2 环境变量文件

项目支持以下环境变量文件：

.env - 所有环境通用
.env.local - 本地配置（不会提交到版本控制）
.env.development - 开发环境
.env.production - 生产环境

示例 .env.local：

# Dify AI 配置
VITE_DIFY_API_KEY=app-xxxxxxxxxxxx
VITE_DIFY_BASE_URL=https://api.dify.ai

# 其他配置
VITE_APP_TITLE=AI 水务系统

6. 验证配置

检查 Dify 配置

在浏览器控制台运行：

// 如果配置正确，不会有警告
import.meta.env.VITE_DIFY_API_KEY

检查 GeoServer 连接

启动项目后，在浏览器控制台查看网络请求，确认 /geoserver 开头的请求能正常代理。

常见问题

Q: npm install 失败？

A: 尝试以下解决方案：

清除 npm 缓存：npm cache clean --force
删除 node_modules 和 package-lock.json，重新安装
检查 Node.js 版本是否满足要求

Q: 网络问题导致安装慢？

A: 配置 npm 镜像源：

npm config set registry http://registry.npmmirror.com

Q: GeoServer 连接失败？

A: 检查以下几点：

GeoServer 服务是否已启动
端口配置是否正确
用户名密码是否正确
防火墙是否允许连接

Q: Dify AI 无法调用？

A: 检查以下几点：

API Key 是否正确配置
是否创建了 .env.local 文件
查看浏览器控制台是否有警告信息