Chrome 扩展中的 VueJS 多页面

塔马斯约努特

我有以下文件夹结构：

民众
- 索引.html
- 登录.html
源文件
- 组件（包含 Login.vue）
- 意见
- 应用程序视图
- 主文件

index.html 具有以下代码段：

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

<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。

塔马斯约努特

解决方案是通过在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
}

}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。