Question

我正在尝试设置一个包含多个Vue应用程序的Vue项目。我将vue.config.js设置如下，以具有多个入口点：

var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  chainWebpack: config => {
    // delete default entry point 'app'
    config.entryPoints.delete('app').end()
    //delete default 'html' plugin - in case you don't want default index.html file
    //delete 'prefetch' and 'preload' plugins which are dependent on 'html' plugin
    config.plugins
      .delete('html')
      .delete('prefetch')
      .delete('preload')
  },

  configureWebpack: {
    entry: {
      app1: './src/app1/main.js',
      app2: './src/app2/main.js'
    },
    output: {
      filename: '[name]/[name].bundle.js'
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: 'public/app1/index.html',
        filename: 'app1/index.html',
        chunks: ['app1', 'chunk-common', 'chunk-vendors'],
        title: 'App 1'
      }),
      new HtmlWebpackPlugin({
        template: 'public/app2/index.html',
        filename: 'app2/index.html',
        chunks: ['app2', 'chunk-common', 'chunk-vendors'],
        title: 'App 2'
      })
    ]
  }
}

然后我有一个src文件夹，其中包含App1和App2，每个文件夹都有自己的路由器设置：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

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

export default router

通过此设置，我可以访问主页“ http：// localhost：8080 / app1 /”和“ http：// localhost：8080 / app2 /”的路由，但是在尝试访问“ http：// localhost”时：8080 / app1 / about'，除非我使用路由器链接，否则它不起作用。有人对我缺少的内容有任何想法，因此此路由可以直接从url运行吗？

谢谢。

具有多个入口点和路由器的Vue应用中的路由问题

0 个答案: