部署Vue项目至Azure App Service后无法访问，提示找不到main.ts

你套用的是Azure App Service针对Node.js后端（Express）的部署教程，但你的项目是Vue前端项目，两者部署逻辑完全不匹配，这是导致错误的根本原因。

核心问题说明 #

那个教程面向的是Node.js后端服务，而Vue是前端项目，需要先编译成浏览器可识别的静态文件再部署，不能直接把源码推上去让Node.js环境运行。你在App Service里看到的main.ts是Vue的TypeScript源码文件，浏览器无法直接解析这类文件，必须经过打包编译成普通JS才能被识别，这就是报错的核心原因。

解决步骤 #

• 第一步：先打包Vue项目
  在本地项目根目录执行命令，生成可部署的静态文件：

  npm run build
  

  执行完成后会生成dist文件夹，里面是编译好的HTML、CSS和JS文件，这才是需要部署到Azure的内容。

• 第二步：调整部署目标
  如果用VS Code部署，在选择部署文件夹时，要选中dist文件夹，而不是整个项目根目录。不需要把src、main.ts这类源码文件部署上去，只需要部署dist内的编译产物。

• 第三步：配置Azure App Service的静态文件托管
  若坚持用App Service部署：

  • Linux环境：设置启动命令为npx serve -s dist（需先在本地项目安装依赖：npm install serve --save-dev，并确保serve已添加到package.json的依赖中），让Node.js启动静态文件服务器托管dist内容。
  • Windows环境：在dist文件夹中添加web.config文件，配置IIS托管静态文件，示例内容：

    <?xml version="1.0" encoding="UTF-8"?>
    <configuration>
      <system.webServer>
        <rewrite>
          <rules>
            <rule name="Handle History Mode" stopProcessing="true">
              <match url="(.*)" />
              <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
              </conditions>
              <action type="Rewrite" url="/" />
            </rule>
          </rules>
        </rewrite>
        <staticContent>
          <mimeMap fileExtension=".json" mimeType="application/json" />
        </staticContent>
      </system.webServer>
    </configuration>
    

• 更适配的方案：使用Azure静态Web Apps
  Azure静态Web Apps专门针对前端静态站点优化，部署Vue项目更省心：直接连接代码仓库（GitHub/GitLab），配置构建命令为npm run build、输出目录为dist，平台会自动完成编译和部署，无需额外配置服务器。

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