javascript - Vue路由器未在chrome扩展中加载组件

Question

我正在创建一个将使用 vue 和 vue 路由器的 chrome 扩展。我可以使用sandbox内部 manifest.json 使 vue 工作，这将绕过限制 chrome 扩展的 CSP。我的 vue-router 有问题，我无法显示我使用创建的视图Vue.component。我发现了这个问题，但没有解决我的问题。这是代码，有人可以帮助我吗？

const welcomeScreen = Vue.component({
  template: '#welcome-screen'
});

const newChatroom = Vue.component({
  template: '#create-chat'
});

const accessChatroom = Vue.component({
  template: '#access-chat'
});

const chatroom = Vue.component({
  template: '#chat-board'
});

const routes = [
  { path: '/', component: welcomeScreen },
  { path: '/create-room', component: newChatroom },
  { path: '/access-room/:id', component: accessChatroom },
  { path: '/chatroom/:id', component: chatroom }
]

const router = new VueRouter({
  base: '/popup.html',
  mode: 'history',
  routes,
})

const app = new Vue({
    el: '#app',
    router,
    mounted() {
        console.log('Vue started');
    },
    methods: {
      initChat(){
       // code...
      },
      channelSetup(){
        // code...
      }
    }
});

编辑

如果我使用默认的 vue 路由器哈希导航模式，问题仍然存在。另一件事是我没有使用 webpack，所以我需要对扩展使用沙盒模式，否则我会遇到 CSP 问题。

这是我在welcomeScreen 组件上得到的，一个空白框架

标签： javascriptvue.jsgoogle-chrome-extensionvuejs2