Chrome插件踩坑日志（一）：Vite + Vue3 的奇葩用法

在 Vite + Vue3 中构建 Chrome 插件的奇葩用法

构建 Chrome 插件是一个常见的任务，但当使用 Vite + Vue3 时，开发人员可能会遇到一些奇葩的用法。本文将介绍一个令人费解的问题及其解决方案，帮助开发人员顺利构建 Chrome 插件。

问题：打包失败

在使用 Vite + Vue3 构建 Chrome 插件时，开发人员可能会遇到打包失败的问题，并出现类似以下的错误：

ERROR in ./node_modules/vue/dist/vue.esm-bundler.js 1:0-34513
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

这个错误令人费解，因为在开发过程中从未遇到过。

解决方案：修改 vite.config.js

经过一番排查，发现问题出在 Vite 的构建配置中，存在一个奇葩的设置：

// vite.config.js
build: {
  rollupOptions: {
    output: {
      assetFileNames: 'assets/[name].[ext]',
      chunkFileNames: 'js/[name].[hash].js',
    },
    input: {
      background: './src/background.ts',
      options: './src/options.ts',
      popup: './src/popup.vue',
    },
  },
},

问题出在了 input 属性上。在传统的 Webpack 或 Rollup 构建中，input 属性指定了需要打包的入口文件。但在 Vite 中，input 属性却指定了插件的脚本上下文。

在 Chrome 插件中，脚本上下文是通过 manifest.json 文件中的 background、options、popup 等属性指定的。因此，在 Vite 中构建 Chrome 插件时，input 属性应该如下配置：

// vite.config.js
build: {
  rollupOptions: {
    input: {
      background: './src/background.ts',
      options: './src/options.ts',
      popup: './src/popup.html',
    },
  },
},

注意，popup 的入口文件不再是 .vue 文件，而是 .html 文件。因为在打包插件时，Vite 会自动将 .vue 文件编译成 .html 文件。

修改了 vite.config.js 文件后，构建问题迎刃而解。

原因：Vite 与传统构建工具的区别

这个奇葩的用法让我们深刻地体会到了 Vite 与传统构建工具之间的差异。在 Vite 中，构建配置的很多细节都与传统构建工具不同，需要格外注意。

在传统构建工具中，input 属性指定了需要打包的入口文件。但在 Vite 中，input 属性指定了插件的脚本上下文。这是因为 Vite 采用了一种基于模块的打包方式，它将代码组织成模块，并根据脚本上下文决定哪些模块需要打包。

结论

在 Vite + Vue3 中构建 Chrome 插件时，需要格外注意 vite.config.js 中的 input 属性。input 属性指定了插件的脚本上下文，而不是需要打包的入口文件。通过正确配置 input 属性，我们可以避免打包失败的问题。

常见问题解答

1. 为什么 Vite 中 input 属性的用法与传统构建工具不同？
   答：Vite 采用了一种基于模块的打包方式，因此 input 属性指定了插件的脚本上下文，而不是需要打包的入口文件。

2. 如何正确配置 Vite 中的 input 属性？
   答：对于 Chrome 插件，input 属性应指定 background、options 和 popup 的脚本上下文，而不是 .vue 文件。

3. 除了 input 属性之外，在 Vite 中构建 Chrome 插件时还需要注意哪些配置？
   答：还应注意 manifest.json 文件的配置，确保 background、options 和 popup 的脚本上下文与 vite.config.js 中的 input 属性相匹配。

4. 除了 Chrome 插件之外，Vite 是否还可以用于构建其他类型的 Web 扩展程序？
   答：是的，Vite 可以用于构建任何类型的 Web 扩展程序，包括 Firefox 扩展程序和 Safari 扩展程序。

5. Vite 与传统构建工具相比有哪些优势？
   答：Vite 的优势包括快速构建速度、模块化打包方式和对现代 JavaScript 特性的支持。