VueJS Chrome扩展程序中的多个页面

Question

我具有以下文件夹结构：

• 公共
  • index.html
  • login.html
• src
  • 组件（包含Login.vue）
  • 观看次数
  • App.vue
  • main.js

index.html具有以下代码段：

<div id="app"></div>

login.html具有以下代码段：

<div id="login"></div>

在main.js中，我有以下内容：

import Vue from 'vue'
import './components'
import './plugins'
import { sync } from 'vuex-router-sync'
import App from './App'
import router from '@/router'
import store from '@/store' 
import Login from './components/Login'

sync(store, router)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

new Vue({
   router,
   store,
   render: h => h(Login) ===> I've tried here also "template: Login" and el: '#login' instead of 'mount' but to no avail
}).$mount('#login')

虽然这适用于index.html，但不会为login.html加载。

Answer 1

该解决方案是通过在vue.config.js文件中添加额外的页面来完成的：

module.exports = {
pages: {
    index: {
        entry: 'src/main.js',
        template: 'public/index.html',
        filename: 'index.html',
        title: 'Index Page',
    },
    login: {
        entry: 'src/main.js',
        template: 'public/login.html',
        filename: 'login.html',
    },
    register: {
        entry: 'src/main.js',
        template: 'public/register.html',
        filename: 'register.html',
    },
},
devServer: {
   disableHostCheck: true
}

}