Netlify Dev能否适配Svelte/Vite（非SvelteKit）？问题求助

一、解决Netlify Dev卡在"Waiting for framework port 5173"的问题 #

该问题源于Netlify Dev自动框架检测逻辑与Svelte/Vite组合不兼容，导致无法正确识别Vite服务端口，可通过以下步骤修复：

• 强制指定框架类型：在netlify.toml的[dev]区块中添加framework = "vite"，明确告知Netlify Dev使用Vite作为开发框架，避免自动检测出错。修改后的配置如下：

[build]
  command = "npm run build"
  publish="dist"
  functions="functions"
[dev]
  targetPort=5173
  port=8888
  framework = "vite"

• 验证Vite端口配置：检查项目根目录的vite.config.js，确保server.port设置为5173（与targetPort一致）。若Vite使用其他端口，需同步修改targetPort的值。示例Vite配置：

import { svelte } from '@sveltejs/vite-plugin-svelte'

export default {
  plugins: [svelte()],
  server: {
    port: 5173
  }
}

• 清理缓存重新启动：删除项目根目录下的.netlify、node_modules文件夹，执行npm install重装依赖后再运行netlify dev。

二、解决无服务器函数getProjects返回404的问题 #

404错误多因函数路径识别错误或文件结构不符合Netlify函数要求导致，可按以下步骤排查：

• 修正函数文件结构：Netlify无服务器函数支持两种正确结构：

  1. 函数文件直接放在functions根目录：functions/getProjects.js
  2. 每个函数单独一个文件夹，文件夹内主文件命名为index.js：functions/getProjects/index.js
     当前你的结构是functions/getProjects/getProjects.js，Netlify无法识别该文件作为函数入口，需将getProjects.js重命名为index.js，或直接将文件移动到functions根目录。

• 确认函数加载状态：运行netlify dev时，终端日志若显示Loaded function getProjects，说明函数已被正确加载；若未出现该提示，检查文件结构是否符合要求。

• 修复返回值字段拼写错误：getProjects.js中返回的状态码字段为statuscode（全小写），正确字段名应为statusCode（驼峰命名）。该错误虽不是404直接原因，但会导致函数返回异常状态，修正后的代码片段：

return {
  statusCode: 200,
  body: JSON.stringify(results)
}

• 验证环境变量加载：在函数中添加日志确认环境变量是否正确加载：

console.log('MONGODB_URI:', process.env.MONGODB_URI)

运行netlify dev后查看终端日志，若能正确输出变量值，说明环境变量加载正常；若未输出，检查.env文件是否在项目根目录，且变量名拼写正确。

内容的提问来源于stack exchange，提问作者Pick Avana