2023.6.14 - vue多页面项目配置

抽离multipage.config.js多页面配置文件

const { resolve } = require('path');
const fs = require('fs');

// 获取多页的入口配置
const pagesPath = 'src/pages';
// pages页面配置
const pages = getAllPages(resolve(pagesPath));
// alias 配置
const aliasConfig = {};

/**
 * alias 配置，给 pages/ 下的分页都取一个别名（为分页的文件夹名）
 * @example
 * `import 'application'; // => src/pages/application/`
 */
Object.values(pages).forEach((page) => {
  const pagePath = `${pagesPath}/${page.title}/`;
  aliasConfig[page.title] = pagePath;
  aliasConfig['@' + page.title] = pagePath; // **创建 @ 开头的路径，用于 vue 模版中的 alias 路径使用**
});
// get all pages
function getAllPages(pagesPath) {
  const pagesEntry = (dir) => `${pagesPath}/${dir}/main.js`;
  const pagesConfig = {};
  // 同步取出所有的 pages
  let dirs = fs.readdirSync(pagesPath).filter((dir) => {
    return fs.statSync(pagesPath + '/' + dir).isDirectory();
  });
  // 生成 pages 配置
  dirs.forEach((dir) => {
    pagesConfig[dir] = {
      entry: pagesEntry(dir),
      title: dir,
      filename: `${dir}.html`,
      //  指定多页面使用的模版路径
      template: `${resolve('public/template')}/${dir}.html`,
    };
  });

  return pagesConfig;
}

module.exports = {
  pages,
  aliasConfig,
};

在vue.config.js 引入

const { resolve } = require('path');
const { pages, aliasConfig } = require('./multipage.config');
module.exports = {
  lintOnSave: false,
  //  多页面
  pages,
  configureWebpack: {
    resolve: {
      // 多页面别名配置 
      alias: { '@': resolve('src'), src: resolve('src') , ...aliasConfig},
      extensions: ['.vue.js'],
    },
  },
  // 开发服务器配置
  devServer: {
    // 代理配置
    proxy: require('./proxy.config'),
  },
};