'Enable sourcemaps in Vue-Vite

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.

vue.jsvuejs3bugsnagvite


Solution 1:[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,
    },
}

Solution 2:[2]

Vite 2.x (docs):

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

Vite 1.x:

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

Solution 3:[3]

As mentioned in other answers, the build.sourcemap setting must be enabled to generate sourcemaps:

export default {
  build: {
    sourcemap: true,
  },
}

If you are looking for simple integration with Bugsnag, check out the following library:

https://github.com/ElMassimo/vite-plugin-bugsnag

It provides a plugin to upload sourcemaps, and will enable the build.sourcemap setting for you.

Solution 4:[4]

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,
  },
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 Maximo Mussini
Solution 4 Robin Zimmermann

Related Questions