javascript - Chrome扩展中的VueJS多个页面

Question

我有以下文件夹结构：

• 上市
  • 索引.html
  • 登录.html
• 源代码
  • 组件（包含 Login.vue）
  • 意见
  • 应用程序.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
}

}