当前位置：首页 > news >正文

3步搭建Streetmix本地开发环境：开发者入门教程

news 2026/7/26 22:34:47

3步搭建Streetmix本地开发环境：开发者入门教程

【免费下载链接】streetmixStreetmix makes it easy for people to design public spaces together.项目地址: https://gitcode.com/gh_mirrors/st/streetmix

Streetmix是一款让公众轻松协作设计公共空间的开源工具，通过直观的界面和丰富的元素库，任何人都能快速创建专业的街道设计方案。本文将带你通过三个简单步骤，在本地搭建完整的Streetmix开发环境，开启你的公共空间设计工具开发之旅。

准备工作：安装必要依赖

在开始搭建前，请确保你的系统已安装以下基础软件：

Node.js（推荐使用最新"Active LTS"版本）：作为项目的运行环境
PostgreSQL：用于存储应用数据的关系型数据库
PostGIS：PostgreSQL的空间数据扩展，支持地理信息处理
Git：用于代码版本控制

不同操作系统的安装方式略有差异：

Windows系统

安装Git
从Node.js官网下载并安装Node.js
安装PostgreSQL和PostGIS

Mac OS系统

推荐使用Homebrew安装：

# 安装XCode开发者工具 xcode-select --install # 安装Homebrew（如未安装） /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" # 安装依赖 brew install nodejs postgres postgis

Linux系统

以Ubuntu为例：

# 安装Node.js（使用nvm推荐） curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash nvm install --lts # 安装PostgreSQL和PostGIS sudo apt-get update sudo apt-get install postgresql postgis

步骤一：获取项目代码

首先，通过Git克隆Streetmix项目仓库到本地：

git clone https://gitcode.com/gh_mirrors/st/streetmix cd streetmix

步骤二：配置环境与安装依赖

安装项目依赖

使用npm安装所有项目依赖包：

npm install

配置环境变量

复制环境变量模板文件创建本地配置：

cp .env.example .env

编辑.env文件设置必要的环境变量。对于本地开发，最关键的是配置数据库连接信息（如需要）：

PGUSER=你的数据库用户名 PGPASSWORD=你的数据库密码

初始化数据库

执行以下命令创建并迁移数据库：

npx sequelize db:create npx sequelize db:migrate NODE_ENV=test npx sequelize db:create NODE_ENV=test npx sequelize db:migrate

步骤三：启动开发服务器

完成上述配置后，即可启动本地开发服务器：

npm start

等待编译完成后，在浏览器中访问http://localhost:8000即可看到Streetmix的主界面：

验证安装与常见问题

验证安装

成功启动后，你应该能看到如上图所示的Streetmix界面，可以尝试：

从左侧工具栏拖拽元素到街道中
修改街道宽度和各部分尺寸
创建新街道并保存

常见问题解决

数据库连接错误：
- 确保PostgreSQL服务已启动
- 检查.env文件中的数据库配置是否正确
- 尝试重新初始化数据库：npx sequelize db:drop && npx sequelize db:create && npx sequelize db:migrate
依赖安装失败：
- 删除node_modules文件夹后重新安装：rm -rf node_modules && npm install
- 确保使用npm而非yarn安装依赖
启动后无法访问：
- 检查端口是否被占用，可修改.env文件中的PORT变量
- 查看终端输出的错误信息，针对性解决