vue cli3 多页应用

版权声明：转载请注明出处。 https://blog.csdn.net/zeroyulong/article/details/88867983

多页的实现方式其实就是复制N套index.html、 App.vue、 main.js、 router.js、如图index目录下的文件是vue cli3项目初始化后的基础文件，我们只是将其移动到了index文件夹下，subpageone  和 subpagetwo的结构与index目录的结构一般无二，真正的核心是vue.config.js的配置。

目录结构如图：

核心配置 vue.config.js代码如下（参见官方文档 https://cli.vuejs.org/zh/config/#filenamehashing）：

module.exports = {
    //部署应用包时的基本 URL(解决build之后文件访问路径错误的问题)
    publicPath: process.env.NODE_ENV === 'production'
        ? '/vuetest/'
        : '/',
        
    pages:{
        index:{
            // page 的入口
            entry: 'src/modules/index/main.js',
            // 模板来源
            template: 'public/index.html',
            // 在 dist/index.html 的输出
            filename: 'index.html',
            // 当使用 title 选项时，
            // template 中的 title 标签需要时 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'Index Page',
            // 在这个页面中包含的块，默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors','chunk-common','index']
        },
        // 当使用只有入口的字符串格式时，
        // 模板会被推导为 `public/subpage.html`
        // 并且如果找不到的话，就回退到 `public/index.html`。
        // 输出文件名会被推导为 `subpage.html`。
        subpageone:'src/modules/subpageone/subpageone.js',
        subpagetwo:'src/modules/subpagetwo/subpagetwo.js'
    }
}