Vue CLI开发Chrome扩展如何配置live build实时构建文件夹

这个是成本最低的方案，Vue CLI本身支持构建时监听文件变更自动增量构建，完全兼容你现有的Vuetify配置，不需要调整任何构建依赖，同时解决了本地serve模式无法调用Chrome扩展API的问题：

• 打开项目的package.json，在scripts中新增一行：

  "build:watch": "vue-cli-service build --watch"
  

• 执行npm run build:watch，修改代码后会自动重新构建到dist目录，你只需要刷新扩展的选项页就能看到更新。

你当前配置报错的核心原因是esbuild-vue插件对Vue单文件组件的样式处理、Vuetify依赖的SASS预编译、全局变量注入支持不足，需要补充对应插件：

1. 首先安装缺失的依赖：

   # 如果你用的是Vue2 + Vuetify2，执行：
   npm i esbuild-plugin-vue2 esbuild-sass-plugin esbuild-plugin-import -D
   # 如果你用的是Vue3 + Vuetify3，执行：
   npm i esbuild-plugin-vue3 esbuild-sass-plugin esbuild-plugin-import -D
   

2. 调整esbuild配置文件如下：

   const vuePlugin = require('esbuild-plugin-vue2'); // Vue3的话换esbuild-plugin-vue3
   const { sassPlugin } = require('esbuild-sass-plugin');
   const importPlugin = require('esbuild-plugin-import');
   
   require('esbuild').build({
       entryPoints: ['main.js'],
       bundle: true,
       outfile: 'dist/js/out.js', // 输出路径对应你扩展manifest中配置的路径
       plugins: [
           // 处理Vuetify按需导入
           importPlugin({
               libraryName: 'vuetify',
               libraryDirectory: 'lib',
               style: (name) => `vuetify/src/styles/${name}.scss`
           }),
           vuePlugin(),
           sassPlugin()
       ],
       watch: {
           onRebuild(error, result) {
               if (error) console.error('watch build failed:', error)
               else console.log('watch build succeeded')
           },
       },
       define: {
           "process.env.NODE_ENV": JSON.stringify("development"),
           // Vue3需要额外加以下全局变量
           "__VUE_OPTIONS_API__": JSON.stringify(true),
           "__VUE_PROD_DEVTOOLS__": JSON.stringify(false)
       },
       // 处理静态资源
       loader: {
           '.png': 'file',
           '.jpg': 'file',
           '.woff': 'file',
           '.woff2': 'file'
       }
   });
   

3. 额外适配注意点：
   • 如果你的Vuetify是全局引入的，需要把Vuetify的全局样式文件加入entryPoints，或者在main.js顶部导入vuetify/dist/vuetify.min.css
   • 如果你用到了Vuetify的主题变量自定义，需要在sassPlugin的配置中传入prependData来注入全局sass变量

内容的提问来源于stack exchange，提问作者Johan Hoeksma