如何在谷歌浏览器扩展的构建项目中使用 VUEJS3 显示路由器视图

如何解决如何在谷歌浏览器扩展的构建项目中使用 VUEJS3 显示路由器视图

我正在尝试使用 VueJS3 创建一个 Chromium 扩展。在本地，一切正常，组件显示在需要的位置。但是一旦在 Chrome 扩展程序中导出，除了我的 App.js 的第一个组件外，没有任何显示。为什么？

❤︎ manifest.json：

{
   "name" : "MyProject","version" : "0.20.1","permissions": ["cookies","webRequest","tabs","storage","<all_urls>"],"background": {
       "scripts": [
         "/js/browser-polyfill.js","/js/browser-polyfill.js.map","/js/chunk-vendors.6711c78c.js","/js/chunk-vendors.6711c78c.js.map","/js/app.b9302fd1.js","/js/app.b9302fd1.js.map"
       ],"persistent": true
   },"content_scripts": [{
       "matches": [
           "<all_urls>" 
       ],"js": [
           "/js/browser-polyfill.js","/js/app.b9302fd1.js.map"
       ]
   }],"browser_action": {
       "default_title": "MyProject","default_popup": "index.html"
   },"manifest_version": 2
}

❤︎ router.js:

import { createRouter,createWebHistory } from "vue-router";
//first level
import Overview from "../views/Overview.vue";
import Details from "../views/Details.vue";
//second level
import DetailsInfo from "@/components/Details-Info.vue";

const routes = [
  {
    path: "/",name: "Overview",component: Overview
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),routes
});

export default router;

❤︎ app.vue:

<template>
  <div>
    <GeneralNavigation />
    <router-view></router-view>
  </div>

</template>

对于视觉解释：The local result 和 The extension result (after build)

解决方法

我终于找到了答案！ Google chrome 扩展使用与文件夹的文件结构匹配的相对路径。

在构建应用程序之前，我只是在 Router.js 中将我的主路由“/”更改为“/index.html”，这是可行的！

❤︎ router.js:

import { createRouter,createWebHistory } from "vue-router";
//first level
import Overview from "../views/Overview.vue";
import Details from "../views/Details.vue";
//second level
import DetailsInfo from "@/components/Details-Info.vue";

const routes = [
  {
    path: "/index.html",name: "Overview",component: Overview
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),routes
});

export default router;

我希望它对其他人有用！