Enable sourcemaps in Vue-Vite

Question

Is it possible to enable sourcemaps in Vue-Vite in production environment?

I would like to use it for Bugsnag.

Can't find anything about it in the docs.

In dev it just works out of the box.

Answer 1

Thanks to @tony19 I could find it out:

Since vue ~2.0 it works like this:

In <projectRoot>/vite.config.js:

/**
* @type {import('vite').UserConfig}
*/
export default {
    plugins: [vue()],
    build: {
        sourcemap: true,
    },
}

Answer 2

Vite 2.x (docs):

// vite.config.js
export default {
  build: {
    sourcemap: true,
  },
}

Vite 1.x:

// vite.config.js
export default {
  sourcemap: true,
}

Answer 3

I'm using Vite 2.9 and a CSS sourcemap was not being loaded by the browser. (I'm also using Typescript, in case that is relevant to you.)

Based on the @types for vite.config.ts, there is a devSourcemap property under css which you can set to true.

Here is the vite.config.ts file I'm currently using:

import ...;
...

export default defineConfig({
  plugins: [
    vue(),
    checker({
      typescript: true,
      vueTsc: true,
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  css: {
    devSourcemap: true,
  },
});

Answer 4

I use sass in my project and I add this to my vite.config.js, and got css sourcemap.

        import { defineConfig } from 'vite'
        
        // https://vitejs.dev/config/
        export default defineConfig({
          css: {
            devSourcemap: true,
          },
        })