要从头开始配置一个Emscripten-Qt项目，使其能够在浏览器上运行Qt应用程序，你需要按以下步骤进行设置和配置：

1. 安装Emscripten

Emscripten是一个LLVM到JavaScript的编译器工具链，允许你在浏览器中运行以C/C++编写的代码。

1. 安装Emscripten SDK：
   • 访问Emscripten官网，找到安装指南。
   • 克隆Emscripten SDK仓库：
     git clone https://github.com/emscripten-core/emsdk.git cd emsdk
   • 安装和激活最新的SDK版本：
     ./emsdk install latest ./emsdk activate latest
   • 配置环境：
     source ./emsdk_env.sh

2. 安装Qt

确保你已经在你的系统中安装了Qt，并通过Qt安装器添加了相关的开发工具。

3. Qt for WebAssembly

Qt提供了一个WebAssembly工具链，让Qt应用可以被编译为WebAssembly格式。

1. 安装Qt WebAssembly的模块：
   • 打开Qt维护工具（Qt Maintenance Tool）。
   • 在"Add or remove components"中，找到和检查WebAssembly。

4. 创建Qt项目

使用Qt Creator或者命令行创建一个新的Qt项目。

1. 打开Qt Creator，选择“New Project”。
2. 选择适合的项目模版，比如“Qt Widgets Application”。
3. 配置项目，选择目标平台为WebAssembly。

5. 配置CMake或QMake文件

确保你的构建文件中添加了WebAssembly配置：

使用QMake

TEMPLATE = app  
TARGET = my_qt_app  
QT += core gui  
CONFIG += c++11  
SOURCES += main.cpp \  
           mainwindow.cpp  
HEADERS += mainwindow.h  
FORMS += mainwindow.ui  
CONFIG += release  
CONFIG += wasm  

使用CMake

如果你用的是CMake，你可能需要更新CMakeLists.txt文件以支持WebAssembly工具链。

6. 编译和运行

1. 打开终端，确保Emscripten SDK已经在当前会话中激活。
2. 导航到项目的根目录。
3. 使用Qt Creator或者命令行构建项目：
   • Qt Creator: 选择Wasm作为构建套件然后编译。
   • 命令行:
     mkdir build cd build emcmake cmake .. emmake make
4. 启动一个本地服务器以测试你的应用：
   • Emscripten提供了简单的Python服务器：
     python -m http.server
   • 在浏览器中访问localhost:8000，即可查看应用。

7. 调试和优化

• 确保在浏览器的开发者工具中调试你的应用。
• 使用Emscripten的优化选项，例如-O2、-O3等进行优化。
• 确保你的应用遵循WebAssembly和Web平台最佳实践，以获得更好的性能。

通过以上步骤，你应当能成功配置和运行你的第一个Emscripten-Qt项目。务必查阅Qt和Emscripten的官方文档以获取更多详细的配置和优化信息。