Vue3项目使用Vite执行npm run build构建失败求助

问题场景 #

开发环境执行npm run dev可正常运行，控制台打印OK，浏览器显示红色hello；但执行npm run build时失败，报错指向App.vue的</script>标签位置，构建日志如下：

C:\projects-intellij\myapp> npm run build

> myapp@0.0.0 build
> run-p type-check build-only


> myapp@0.0.0 type-check
> vue-tsc --noEmit -p tsconfig.app.json --composite false


> myapp@0.0.0 build-only
> vite build

vue defineConfig params: build production false
import.meta.url file:///C:/projects-intellij/myapp/vite.config.ts
vite v4.4.9 building for production...
✓ 5 modules transformed.
✓ built in 121ms
[vite:build-import-analysis] Parse error @:3:10
file: C:/projects-intellij/myapp/src/App.vue:3:9
1: <script lang="ts" setup>
2: console.log('OK');
3: </script>
            ^
4: <template>
5:   hello
error during build:
Error: Parse error @:3:10
    at parse$e (file:///C:/projects-intellij/myapp/node_modules/vite/dist/node/chunks/dep-df561101.js:16472:355)
    at Object.transform (file:///C:/projects-intellij/myapp/node_modules/vite/dist/node/chunks/dep-df561101.js:46579:27)
ERROR: "build-only" exited with 1.

使用的极简App.vue文件：

<script lang="ts" setup>
console.log('OK');
</script>

<template>
  hello
</template>

<style>
body {
  color: red;
}
</style>

解决方案 #

• 检查Vite与Vue插件版本兼容性
  Vite 4.x需要匹配对应版本的@vitejs/plugin-vue，建议更新到最新兼容版本：

  npm install @vitejs/plugin-vue@latest --save-dev
  

• 切换文件换行符为LF
  Windows下的CRLF换行符可能导致解析异常，在编辑器中打开App.vue，将右下角的换行符标识从CRLF切换为LF，保存后重新构建。

• 清理Vite缓存
  缓存文件可能引发构建异常，执行以下命令清理后重试：

  # Linux/Mac
  rm -rf node_modules/.vite
  # Windows
  rmdir /s /q node_modules\.vite
  npm run build
  

• 检查tsconfig配置
  确保tsconfig.app.json的compilerOptions与Vite配置兼容，示例配置：

  {
    "compilerOptions": {
      "module": "ESNext",
      "target": "ES2020",
      "useDefineForClassFields": true,
      "moduleResolution": "bundler",
      "strict": true,
      "skipLibCheck": true,
      "resolveJsonModule": true
    },
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
  }
  

• 降级Vite版本
  若上述方法无效，可能是Vite 4.4.9的已知bug，尝试降级到4.4.8：

  npm install vite@4.4.8 --save-dev
  

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