vue搭建多页面开发环境

た入场券 2023-10-11 14:29 46阅读 0赞

自从习惯开发了单页面应用，对多页面的页面间的相互跳转间没有过渡效果、难维护极度反感。但是最近公司技术老大说，当一个应用越来越大的时候单页面模式应付不来，但是没讲怎么应付不来，所以还得自己去复习一遍这两者的区别：

![format_png][]

这样对比的话，单页面的优势确实很大，但当我自己去打开某宝，某东的移动端页面时，确实它们都是多页面应用。为什么？我能想到的就几点：

1.单页面使用的技术对低版本的浏览器不友好，大公司还得兼顾使用低版本浏览器的用户啊

2.功能模块开发来说，比如说单页面的业务公用组件，有时候你都不知道分给谁开发

3.seo优化吧（PS：既然是大应用应该很多人都知道，为什么还要做搜索引擎优化）

修改vue.config.js

#### pages ####

*  Type: `Object`
 *  Default: `undefined`
    
    在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象，对象的 key 是入口的名字，value 是：
    
     *  一个指定了 `entry`, `template`, `filename`, `title` 和 `chunks` 的对象 (除了 `entry` 之外都是可选的)；
     *  或一个指定其 `entry` 的字符串。
    
        module.exports = {
          pages: {
            index: {
              // page 的入口
              entry: 'src/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`。
            subpage: 'src/subpage/main.js'
          }
        }
    
    提示
    
    当在 multi-page 模式下构建时，webpack 配置会包含不一样的插件 (这时会存在多个 `html-webpack-plugin` 和 `preload-webpack-plugin` 的实例)。如果你试图修改这些插件的选项，请确认运行 `vue inspect`。

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTI3MjUzNS8yMDE4MDMvMTI3MjUzNS0yMDE4MDMyMDE0NTgyOTQ3OS0xMTc1OTkzNy5wbmc?x-oss-process=image/format,png