[JavaScript知识库]vue多入口配置

目录结构：

public
    index.html
    otherpage
        index.html
src
    index
        App.vue
        main.js
    otherpage
        App.vue
        main.js
vue.config.js

vue.config.js配置：

module.exports = {
    pages: {
        index: {
            entry: 'src/index/main.js',
            template: 'public/index.html',
            filename: 'index.html',
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        otherpage: {
            entry: 'src/otherpage/main.js',
            template: 'public/otherpage/index.html',
            filename: 'otherpage/index.html',
            chunks: ['chunk-vendors', 'chunk-common', 'otherpage']
        }
    }

}

页面跳转：

<a href="./otherpage#/xxxxx">

如果在vue.config.js中的otherpage中没有设置public目录下的文件夹路径，即otherpage文件夹，而直接使用otherpage.html，那么页面跳转时的写法如下（此时如果不加.html后缀，则页面无法跳转。）：

<a href="./otherpage.html#/xxxxx">

vue.config.js中的otherpage配置如下：

 otherpage: {
            entry: 'src/otherpage/main.js',
            template: 'public/otherpage.html',
            filename: 'otherpage.html',
            chunks: ['chunk-vendors', 'chunk-common', 'otherpage']
        }

注意：vue.config.js中pages下的index是系统默认加载的入口。