See EDIT below for steps to reproduce.
I am trying to generate sourcemaps for a production build for the HelloWorld App for Vite+Vue. Unfortunately it does not show all the components (only shows the WelcomeItem component). See snaphot from chrome devtools below:
When you inspect the sourcemap files, you see that it does not add App.vue, Helloworld.vue and TheWelcome.vue to sources:
{
"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": [ ...
], ...
}
The dev mode is working OK, I can see my source code.
Here is my config. All I did was add build.sourcemap=true.
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
build: {
sourcemap: true
}
})
EDIT: Steps to reproduce
npm init vue@latest
// pick No everywhere
cd vue-project
npm install
// add build.sourcemap = true in the vite.config.js file as shown above
npm run build
npm run preview
I have observed that if you add any code to the script
tag in the component App.vue
(other than components' imports), then it will appear in the sourcemaps.
App.vue
file:
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
console.log("Test");
</script>
...
I hope it works for you too ^^