如何在Visual Studio 2022中创建Preact项目并添加至已有多项目解决方案

好问题！Visual Studio 2022并没有内置Preact的项目模板，所以没法像生成React项目那样直接通过VS的模板向导一键创建。不过别担心，我们可以用Preact官方的CLI创建项目，再把它导入到你的现有解决方案中，同样能实现多项目同时启动的需求。下面是具体的操作步骤：

一、创建Preact项目（使用官方CLI） #

首先确保你的电脑上已经安装了Node.js（建议LTS版本），然后按以下步骤操作：

• 打开PowerShell或者CMD命令行工具，导航到你想存放Preact项目的文件夹
• 运行Preact官方的项目初始化命令：

  npx create-preact-app my-preact-app
  

  把my-preact-app换成你想要的项目名称，按提示完成项目创建即可。

二、将Preact项目导入到VS2022现有解决方案 #

项目创建好后，把它整合到你的现有解决方案里：

• 打开你的VS2022解决方案
• 在解决方案资源管理器中，右键点击解决方案名称 → 选择添加 → 现有项目
• 在弹出的文件选择窗口中，找到刚才创建的Preact项目目录，选中里面的package.json文件，点击打开

  VS2022会自动识别这是一个Node.js项目，导入后会生成对应的.njsproj项目文件，你可以在解决方案中看到这个Preact项目了。

三、配置多项目同时启动 #

接下来设置让API项目和Preact项目一起启动：

• 右键点击解决方案名称 → 选择属性
• 在属性窗口的启动项目选项卡中，选择多启动项目
• 在项目列表里，把你的API项目和Preact项目的操作都设置为启动
• 如果需要调整启动顺序（比如先启动API再启动前端），可以用右侧的上下箭头调整顺序
• 点击确定保存配置，之后点击VS的启动按钮，两个项目就会同时运行了

四、可选：配置API代理（避免跨域） #

如果你的Preact项目需要调用本地运行的API，可以在Preact项目的package.json中添加代理配置，这样开发时的请求会自动转发到API服务器：
在package.json文件里添加一行：

"proxy": "http://localhost:5000"

把http://localhost:5000换成你的API项目实际运行的地址即可。

内容的提问来源于stack exchange，提问作者Esteban Chornet