vue多页面项目开发实战指南

dist
├── static
│   ├── css
│   ├── js
│   ├── img
│   ├── dll
│   └── ...
└── index.html
└── ...
└── ...

dist
├── page(这里名字打包出哪个文件夹自己配置)
│   ├── css
│   ├── js
│   ├── img
│   ├── index.html
│   └── user.html
│   └── setting.html
│   └── ....html
│   └── ....html
.   ....
.   ....
.   ....

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'class="lazy" data-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: 'class="lazy" data-src/subpage/main.js'
  }
}

pages
└── index-skeleton.html
└── indexApp.html
└── app.js

const glob = require('glob')
const fs = require('fs');
let titleObj = {};
// 统一配置多页

// 这里是遍历class="lazy" data-src下面的pages 下面每个文件夹(例如index)下以xxxApp.vue 命名的vue页面
glob.sync('./class="lazy" data-src/pages*App.vue').forEach((path) => {
    // 遍历path
    console.log(path,'path')
   //./class="lazy" data-src/pages/index/indexApp.vue path
  
  // 找到文件名
  const fileName = path.split('/')[path.split('/').length - 1];
   console.log(fileName,'fileName')
   // indexApp.vue fileName
  
  // 去掉App 后缀
  const chunk = path.substring(12, path.indexOf('/' + fileName));
    console.log(chunk,'chunk')
   // index chunk
 
  // 这里是给每个页面设置标题,需要在indexApp.vue设置一个变量pageTitle
  let fileContent = fs
    .readFileSync(path, { encoding: 'utf-8' })
    .toString()
    .replace(/\r\n/g, '');
  fileContent = fileContent.substr(fileContent.indexOf('pageTitle:'));
  fileContent = fileContent.substr(0, fileContent.indexOf(','));

  fileContent =
    fileContent.indexOf('"') > 0
      ? fileContent.substr(fileContent.indexOf('"') + 1)
      : fileContent.substr(fileContent.indexOf("'") + 1);

  fileContent =
    fileContent.indexOf('"') > 0
      ? fileContent.substr(0, fileContent.indexOf('"'))
      : fileContent.substr(0, fileContent.indexOf("'"));
  titleObj[chunk] = fileContent ? fileContent : '标题';
});


// 这里是遍历class="lazy" data-src下面的pages 下面每个文件夹(例如index)下以app.js
glob.sync('./class="lazy" data-src/pagesapp.js').forEach((path) => {
  //打包js
  const chunk = path.split('./class="lazy" data-src/pages/')[1].split('/app.js')[0];
  const tmp = chunk.split('/');
  // 模版html,如果都是一样的,可以直接使用public下index.html,如果要设置标题的话,需要每个页面都有一个html模版,如果不需要,就可以使用同一个,看个人习惯
  let templateUrl =
    'class="lazy" data-src/pages/' + chunk + '/' + tmp[tmp.length - 1] + '-skeleton.html';

  pages[chunk] = {
    entry: path,//入口文件
    template: templateUrl,//模版html
    title: titleObj[chunk] ? titleObj[chunk] : '标题',//标题
    filename: chunk.replace(/\//g, '-') + '.html',//打包出来的html名字
    chunks: ['chunk-vendors', 'chunk-common', chunk],//依赖包
  };
});
module.exports = {
  // 选项...
  publicPath: process.env.NODE_ENV === 'production'
    ? '/dist/'
    : '/',
  pages,
}

<title><%= htmlWebpackPlugin.options.title %></title>

module.exports = {
  //...
 //...
  optimization: {
    splitChunks: {
      chunks: 'async', // 代码分割时对异步代码生效，all：所有代码有效，inital：同步代码有效
      minSize: 30000, // 代码分割最小的模块大小，引入的模块大于 30000B 才做代码分割
      maxSize: 0, // 代码分割最大的模块大小，大于这个值要进行代码分割，一般使用默认值
      minChunks: 1, // 引入的次数大于等于1时才进行代码分割
      maxAsyncRequests: 6, // 最大的异步请求数量,也就是同时加载的模块最大模块数量
      maxInitialRequests: 4, // 入口文件做代码分割最多分成 4 个 js 文件
      automaticNameDelimiter: '~', // 文件生成时的连接符
      automaticNameMaxLength: 30, // 自动生成的文件名的最大长度
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/, // 位于node_modules中的模块做代码分割
          priority: -10 // 根据优先级决定打包到哪个组里，例如一个 node_modules 中的模块进行代码
        }, // 分割，，既满足 vendors，又满足 default，那么根据优先级会打包到 vendors 组中。
        default: { // 没有 test 表明所有的模块都能进入 default 组，但是注意它的优先级较低。
          priority: -20, //  根据优先级决定打包到哪个组里,打包到优先级高的组里。
          reuseExistingChunk: true // //如果一个模块已经被打包过了,那么再打包时就忽略这个上模块
        }
      }
    }
  }
};

    optimization: {
      minimize: false,
      splitChunks: {
        cacheGroups: {// 缓存分组
          common: {// 公共的模块
            name: 'chunk-common',//命名要和上面chunks定义的一致
            chunks: 'initial',
            minSize: 1,// 大小限制
            priority: 0,
            minChunks: 8,// 最少复用过几次
          },
          // 打包第三方库的文件
          vendor: {
            name: 'chunk-vendors',//命名要和上面chunks定义的一致
            test: /[\\/]node_modules[\\/]/,
            chunks: 'initial',
            priority: 10,// 权限更高，优先抽离，重要！！！
            minChunks: 8,
          },
        },
      },
    },

let scssVariables = require('./class="lazy" data-src/scss/variables.scss.js');

css: {
    loaderOptions: {
      scss: {
        prependData:
          Object.keys(scssVariables)
            .map((k) => `${k.replace('_', '-')}: ${scssVariables[k]};`)
            .join('\n') + '\n',
      },
    },
  },

module.exports = {
  publicPath: './',
  //输出目录
  outputDir: 'fund',
  assetsDir: '',
  // 配置别名
  chainWebpack: (config) => {
    config.resolve.alias.set('@', resolve('class="lazy" data-src'));
    config.resolve.alias.set('@@', resolve('class="lazy" data-src/components'));
    config.resolve.alias.set('@assets', resolve('class="lazy" data-src/assets'));
    config.resolve.alias.set('scss', resolve('class="lazy" data-src/scss'));
  },
  // 关闭eslint校验
  lintOnSave: false,
  // 不生成map文件
  productionSourceMap: false,
  //文件名称不带hash值
  filenameHashing: false,
  devServer: {
    publicPath: '/fund/',
    proxy: {// 本地调试转发
      '/api': {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        },
      },
    },
  },
};