Vue.js 在 Vue-Vite 中启用源映射

在本文中，我们将介绍如何在 Vue-Vite 中启用源映射。Vue-Vite 是一个基于 Vue.js 的新一代构建工具，它具有快速的冷启动时间和热模块重载能力。启用源映射可以帮助我们在调试时更轻松地追踪代码的问题。

什么是源映射？

源映射（sourcemaps）是一种文件格式，用于将编译后的代码映射回原始的源代码。在开发过程中，我们通常会将代码进行压缩和合并，以提高性能和加载速度。然而，这样会使得调试变得困难，因为我们只能看到压缩后的代码，无法直接定位到原始的源代码位置。源映射解决了这个问题，它记录了每个压缩后的代码位置对应的原始源代码位置。

在 Vue-Vite 中启用源映射的步骤

在 Vue-Vite 中启用源映射非常简单，只需按照以下步骤进行操作：

打开项目根目录下的 vite.config.js 文件。
找到 build 配置项，并添加 sourcemap: true，如下所示：

// vite.config.js

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

保存文件并重启项目。

示例说明

让我们通过一个具体的示例来说明如何在 Vue-Vite 中启用源映射。假设我们有一个简单的 Vue 组件，在 src 目录下的 HelloWorld.vue 文件中：

<!-- HelloWorld.vue -->

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello World!",
    };
  },
  methods: {
    changeMessage() {
      this.message = "Hello Vue-Vite!";
    },
  },
};
</script>

<style scoped>
h1 {
  color: red;
}
</style>

如果我们在没有启用源映射的情况下调试该组件，我们将只能在压缩后的代码中进行调试，无法直接查看原始的源代码。但是，如果我们启用了源映射，我们可以在开发者工具中直接定位到原始的源代码位置。

现在，按照上述步骤，在 vite.config.js 文件中启用源映射，然后重启项目。接下来，我们在浏览器中打开开发者工具，切换到 “Sources” 选项卡，并找到我们的组件文件 HelloWorld.vue。现在，我们可以在开发者工具中轻松地定位到我们的原始源代码，并进行调试。