在 Vue-Vite 中启用 sourcemaps

Question

是否可以在生产环境中启用 Vue-Vite 中的 sourcemaps？

我想将它用于 Bugsnag。

在文档中找不到任何相关信息。

Answer 1

快 2.x (docs):

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

快 1.x:

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

Answer 2

感谢@tony19 我能找到它：

从 vue ~2.0 开始，它是这样工作的：

在<projectRoot>/vite.config.js中：

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

Answer 3

如其他答案中所述，必须启用 build.sourcemap 设置才能生成源映射：

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

如果您正在寻找与 Bugsnag 的简单集成，请查看以下库：

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

它提供了一个上传源地图的插件，并会为您启用build.sourcemap设置。

Answer 4

我正在使用 Vite 2.9，但浏览器未加载 CSS 源映射。（我也在使用 Typescript，以防与你相关。）

根据vite.config.ts的@types，css下有一个devSourcemap属性可以设置为true.

这是我目前正在使用的 vite.config.ts 文件：

import ...;
...

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

在 Vue-Vite 中启用 sourcemaps

Enable sourcemaps in Vue-Vite

vue.js

vuejs3

bugsnag

vite