Vite+Vue欢迎应用生产环境Sourcemap不完整问题咨询

问题描述 #

在Vite+Vue的HelloWorld项目中，开启生产构建Sourcemap（build.sourcemap=true）后，生成的Sourcemap不完整：仅包含WelcomeItem.vue及依赖库文件，App.vue、HelloWorld.vue与TheWelcome.vue未出现在sources列表中。开发模式下可正常查看所有源代码。

相关信息 #

• Sourcemap文件片段：

{
    "version": 3,
    "file": "index-ecfc4d4f.js",
    "sources": [
        "../../node_modules/@vue/shared/dist/shared.esm-bundler.js",
        "../../node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js",
        "../../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js",
        "../../node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js",
        "../../src/assets/logo.svg",
        "../../src/components/WelcomeItem.vue",
        "../../src/components/icons/IconDocumentation.vue",
        "../../src/components/icons/IconTooling.vue",
        "../../src/components/icons/IconEcosystem.vue",
        "../../src/components/icons/IconCommunity.vue",
        "../../src/components/icons/IconSupport.vue",
        "../../src/main.js"
    ],
    "sourcesContent": [ ... ],
    ...
}

• Vite配置：

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    sourcemap: true
  }
})

• 复现步骤：

npm init vue@latest
# 全部选择No
cd vue-project
npm install
# 在vite.config.js中添加build.sourcemap = true
npm run build
npm run preview

原因分析 #

1. HelloWorld.vue未被引用：默认生成的项目中HelloWorld.vue未被任何文件import，Vite的tree-shaking机制会将未使用的代码移除，因此不会出现在Sourcemap中。
2. Vue插件Sourcemap配置缺失：默认情况下，Vue插件在生产构建时可能未强制生成单文件组件的Sourcemap信息，导致App.vue、TheWelcome.vue的源码路径未被写入Sourcemap。

解决方法 #

1. 确保组件被引用（针对HelloWorld.vue） #

如果需要HelloWorld.vue出现在Sourcemap中，在App.vue中引入该组件：

<script setup>
import TheWelcome from './components/TheWelcome.vue'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <TheWelcome />
  <HelloWorld msg="Hello Vue + Vite" />
</template>

2. 强制开启Vue插件的Sourcemap生成 #

修改Vite配置，在Vue插件中明确开启sourcemap，并调整build.sourcemap类型：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      sourcemap: true // 强制为单文件组件生成Sourcemap
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    sourcemap: 'hidden' // 生成独立的Sourcemap文件，不会在bundle中暴露引用
  }
})

3. 验证修复 #

重新执行构建和预览：

npm run build
npm run preview

此时查看Chrome DevTools的Sources面板，即可看到App.vue、TheWelcome.vue及已引用的HelloWorld.vue出现在Sourcemap的sources列表中。

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