用于 chrome 扩展的 vue cli“实时构建”文件夹答案

【问题标题】：vue cli "live build" folder for chrome extension用于 chrome 扩展的 vue cli“实时构建”文件夹
【发布时间】：2021-09-06 10:01:25
【问题描述】：

我正在做一个扩展并使用npm run build（带有 vue cli）来制作我的选项页面。我需要与 chrome.local.storage 交互。所以现在我需要做一个新的构建，然后在扩展中测试它。

最好有一些“实时构建文件夹”

我可以使用 esbuild 或 esbuild-vue，但是在我的项目中使用 Vuetify 我无法让它工作

目前我正在使用 esbuild-vue：

const vuePlugin = require('esbuild-vue');

require('esbuild').build({
    entryPoints: ['main.js'],
    bundle: true,
    outfile: 'out.js',
    plugins: [vuePlugin()],
    watch: {
        onRebuild(error, result) {
            if (error) console.error('watch build failed:', error)
            else console.log('watch build succeeded:', result)
        },
    },
    define: {
        "process.env.NODE_ENV": JSON.stringify("development"),
    },
});

【问题讨论】：

您是否尝试在npm run build 脚本中添加--watch ？
是的，但这里似乎也一样
现在我正在使用带有 watch: {} 的 esbuild-vue。但我不确定我是否可以使其与离线 Vuetify 部门一起使用。
好的，我试过github.com/privatenumber/esbuild-loader。但是构建仍然需要 4.x 秒。 nuxt + esbuild 也没有运气。也许只是坚持使用 esbuild + vue voor dev。

标签： vue.js firefox-addon-webextensions webextension-storage

【解决方案1】：

好的，Vuetify 3 (Alpha) + Vite 正在为我工作。

示例

对于一个示例项目，您可以克隆：https://github.com/zoutepopcorn/extension-live-build

设置

首先使用 vuetify vue add vuetify 设置一个新项目vue create my-app

然后选择：

? Choose a preset: (Use arrow keys)
  Default (recommended)
> Preview (Vuetify 3 + Vite) 
  Prototype (rapid development)
  V3 (alpha)
  Configure (advanced)

现在编辑vite.config.js 并添加构建和基础：

export default defineConfig({
  ...
  build: {
    outDir: "extension/options"
  },
  base: "options"
})

现在您已经设置文件夹前端和 webextension，如下所示：

extension  (extension )
  |-- manifest.json
  |--- options (build output front-end)
src (front-end options)
package.json
vite.config.js
...

现在你可以像这样拥有你的 package.json：

{ 
  ...
  "scripts": {
        "watch": "vite build --watch",
        "chromium": "web-ext run -t chromium --chromium-binary /usr/bin/google-chrome-stable --arg=\"--auto-open-devtools-for-tabs\" --start-url \"about:blank\"",
        "all": "npm run chromium & npm run watch"
  }
}

【讨论】：