在项目构建过程中上传 SourceMap¶

npm install @cloudcare/vite-plugin-sourcemap --save-dev

yarn add @cloudcare/vite-plugin-sourcemap --dev

pnpm add @cloudcare/vite-plugin-sourcemap --save-dev

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { GuanceSourceMapUploadVitePlugin } from '@cloudcare/vite-plugin-sourcemap'
// https://vitejs.dev/config/
export default defineConfig({
  build: {
    sourcemap: true, // Source map generation must be turned on
  },
  plugins: [
    vue(),

    // Put the Sentry vite plugin after all other plugins
    GuanceSourceMapUploadVitePlugin({
      applicationId: 'xxxxx', //  观测云应用 appid
      apiKey: 'xxxxxxxx', // open apikey
      server: 'https://console.guance-xxx.cn',
      filepaths: ['dist/'], // 需要搜索的目录，可以是文件或者文件目录
      logLevel: 'verbose', // 日志打印级别
      //   root: 'dist/', // 需要上传的相对目录对应的跟目录
      env: 'production', // 观测云 应用的 env
      version: '1.0.0', // 观测云应用的 version
    }),
  ],
})

interface Options {
  /**
   *
   * 要搜索 sourcemap 的文件/目录。
   * 所有与 “extensions 配置” 列表匹配但与“ignore 配置”不匹配的文件都将被搜索
   * sourcemap JSON 或 `//#sourceMappingURL=` 注释，以便找到生成的文件 + 源映射对，然后源映射将被上传。
   */
  filepaths: Array<string> | string

  /**
   * 观测云平台生成的openApi Key，生成方式参考（https://docs.guance.com/management/api-key/open-api/#_1）
   */
  apiKey: string

  /**
   * 观测云平台 OpenAPi 服务
   */
  server: string
  /**
   * 观测云 RUM 应用对应的 applicationId(必填)
   */
  applicationId: string
  /**
   * 观测云 RUM 应用对应的 version(非必填)
   */
  version?: string
  /**
   * 观测云 RUM 应用对应的 env(非必填)
   */
  env?: string

  /**
   * 寻找所有符合条件的文件列表，但是不上传文件，可用于调试
   */
  dryRun?: boolean
  /**
   * 上传后删除所有找到的源映射文件。
   */
  deleteAfterUpload?: boolean
  /**
   * 如果源映射无法通过其 sourceMappingURL 与生成的文件匹配，尝试通过本地磁盘上的文件名进行匹配
   */
  matchSourcemapsByFilename: ?boolean

  /**
   * 寻找目录下的文件后缀列表
   * 默认 [".js", ".map"].
   */
  extensions?: Array<string>

  /**
   * 需要忽略的文件列表
   */
  ignore?: Array<string>

  /**
   * 设置相对路径应计算的目录。sourcemaps 上传的相对路径应该要包含在 产生 error 的路径内，因此
   * 这个参数的意义在于控制上传的相对目录
   * 默认为 `process.cwd()`.
   */
  root?: string
  /**
   * 调试时候使用，产生的日志的等级
   */
  logLevel?: 'quiet' | 'normal' | 'verbose'
}

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { GuanceSourceMapUploadVitePlugin } from '@cloudcare/vite-plugin-sourcemap'
// https://vitejs.dev/config/
export default defineConfig({
  build: {
    sourcemap: 'hidden', // Source map generation must be turned on
  },
  plugins: [
    vue(),

    // Put the Sentry vite plugin after all other plugins
    GuanceSourceMapUploadVitePlugin({
      applicationId: 'xxxxx', //  观测云应用 appid
      apiKey: 'xxxxxxxx', // open apikey
      server: 'https://console.guance-xxx.cn',
      filepaths: ['dist/'], // 需要搜索的目录，可以是文件或者文件目录
      logLevel: 'verbose', // 日志打印级别
      //   root: 'dist/', // 需要上传的相对目录对应的跟目录
      env: 'production', // 观测云 应用的 env
      version: '1.0.0', // 观测云应用的 version
      deleteAfterUpload: true,
      matchSourcemapsByFilename: true,
    }),
  ],
})