Chrome扩展中使用Vue.js遇“Vue is not a constructor”问题求助

核心原因排查 #

出现这个错误通常有两个核心原因：

1. 上下文隔离：Chrome扩展的content script与页面的JS环境是隔离的，content script里加载的Vue无法被页面中的业务脚本访问；反之亦然。
2. 版本不匹配：Vue2和Vue3的全局API差异很大——Vue2暴露window.Vue构造函数，Vue3则通过Vue.createApp()初始化，混用写法会直接报错。

正确引入Vue的步骤 #

方法1：手动注入脚本（适用于原生开发，无需打包工具） #

1. 准备Vue文件

下载完整版Vue（包含编译器，如Vue2的vue.js或Vue3的vue.global.js），放到扩展目录中。

2. 配置manifest.json

确保Vue和业务脚本被标记为可被页面访问：

{
  "manifest_version": 3,
  "name": "Vue扩展示例",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://目标网站域名/*"],
      "js": ["content.js"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["vue.js", "app.js"],
      "matches": ["https://目标网站域名/*"]
    }
  ]
}

3. 编写content.js（注入脚本到页面上下文）

通过创建<script>标签，把Vue和业务脚本注入到页面的JS环境中，确保加载顺序：

// 先注入Vue
const vueScript = document.createElement('script');
vueScript.src = chrome.runtime.getURL('vue.js');
vueScript.onload = () => {
  // Vue加载完成后注入业务脚本
  const appScript = document.createElement('script');
  appScript.src = chrome.runtime.getURL('app.js');
  document.body.appendChild(appScript);
};
document.body.appendChild(vueScript);

4. 编写业务脚本app.js

根据Vue版本编写初始化代码：

• Vue2写法：

// 先创建挂载容器
const appContainer = document.createElement('div');
document.body.appendChild(appContainer);

// 初始化Vue实例
new Vue({
  el: appContainer,
  data() {
    return {
      message: 'Chrome扩展中Vue2运行正常！'
    };
  },
  template: '<div style="padding: 1rem; background: #f0f0f0;">{{ message }}</div>'
});

• Vue3写法：

const appContainer = document.createElement('div');
document.body.appendChild(appContainer);

// 初始化Vue3应用
Vue.createApp({
  data() {
    return {
      message: 'Chrome扩展中Vue3运行正常！'
    };
  },
  template: '<div style="padding: 1rem; background: #f0f0f0;">{{ message }}</div>'
}).mount(appContainer);

方法2：用npm+打包工具管理（推荐，支持Vue单文件组件） #

如果想使用Vue的单文件组件（.vue）等高级特性，建议用npm管理依赖，配合Vite或Webpack打包：

1. 初始化项目

在扩展目录下执行：

npm init -y
npm install vite vue @vitejs/plugin-vue

2. 配置Vite（vite.config.js）

指定打包输出目录为扩展内的dist文件夹：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: './src/main.js'
    }
  }
});

3. 编写业务代码

• src/main.js：

import { createApp } from 'vue';
import App from './App.vue';

// 创建挂载容器并注入页面
const appContainer = document.createElement('div');
document.body.appendChild(appContainer);
createApp(App).mount(appContainer);

• src/App.vue（单文件组件）：

<template>
  <div class="vue-component">
    <h3>{{ message }}</h3>
    <button @click="count++">点击计数：{{ count }}</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const message = 'Vue单文件组件在扩展中运行！';
const count = ref(0);
</script>

<style scoped>
.vue-component {
  padding: 1.5rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
</style>

4. 打包并更新manifest.json

执行npm run build生成dist文件夹，修改manifest.json：

{
  "manifest_version": 3,
  // ...其他配置
  "web_accessible_resources": [
    {
      "resources": ["dist/assets/*.js", "dist/assets/*.css"],
      "matches": ["https://目标网站域名/*"]
    }
  ],
  "content_scripts": [
    {
      "matches": ["https://目标网站域名/*"],
      "js": ["content.js"]
    }
  ]
}

然后在content.js中注入打包后的脚本：

const appScript = document.createElement('script');
appScript.src = chrome.runtime.getURL('dist/assets/app-[hash].js');
// 如果有CSS文件，也需要注入
const appStyle = document.createElement('link');
appStyle.rel = 'stylesheet';
appStyle.href = chrome.runtime.getURL('dist/assets/app-[hash].css');

document.body.appendChild(appStyle);
document.body.appendChild(appScript);

通用建议 #

• 始终注意上下文隔离：content script的window和页面的window是两个独立对象，不要试图在content script中直接初始化Vue，必须把Vue和业务代码注入到页面上下文。
• 优先使用完整版Vue：如果需要动态编译模板（如直接写template选项），必须用包含编译器的完整版，否则会报错。
• 用打包工具简化开发：npm+Vite/Webpack不仅能管理依赖，还能支持Vue的所有特性，减少手动处理脚本的麻烦。

内容的提问来源于stack exchange，提问作者Gabriel Bass