VUE 多页面模式配置（多入口）

vue-cli 基于 v4.0.5

vue.config.js

vue-cli 在升级至V4版本后，项目结构有了部分变化，取消了原有的webpack配置的build文件夹，相关配置转移至根目录下vue.config.js文件，vue.config.js文件创建项目时不自动创建，需手动添加

let path = require('path')
let glob = require('glob') // 用于筛选文件

// 根据路径生成入口pages对象
function handleEntry(entry) {
  let entries = {}
  let entryBaseName = ''
  let entryPathName = ''
  let entryTemplate = ''

  glob.sync(entry).forEach(item => {
    entryBaseName = path.basename(item, path.extname(item))
    entryTemplate = item.split('/').splice(-3)
    entryPathName = entryBaseName 

    entries[entryPathName] = {
      entry: entryTemplate[0] +
        '/' +
        entryTemplate[1] +
        '/' +
        entryTemplate[1] +
        '.js',
      template: entryTemplate[0] + '/' + entryTemplate[1] + '/' + entryTemplate[2], 
      title: entryTemplate[2], // 打包后的标题
      filename: entryTemplate[1] +
      '.ejs', // 打包后的文件名
    }
  })
  return entries
}

function resolve(dir) {
  return path.join(__dirname, dir)
}

const pages = handleEntry('./page/**?/*.html')
console.log(pages)

// 以下开始配置
module.exports = {
  lintOnSave: false,
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
  productionSourceMap: false,
  // 入口设置
  pages,
  devServer: {
    index: '/', // 运行时，默认打开application1页面
    // 告诉dev-server在服务器启动后打开浏览器，将其设置true为打开默认浏览器
    open: true,
    host: '0.0.0.0', // 允许非本机访问
    port: 8080,
    https: false,
    hotOnly: false,
    // 配置首页 入口链接
    before: app => {
      app.get('/', (req, res) => {
        for (let i in pages) {
          res.write(`<a target="_self" href="/``{i}">/``{i}</a></br>`)
        }
        res.end()
      })
    },
    
    // 跨域代理
    // proxy: {
    //   '/api': {
    //     target: 'http://192.168.4.145:3002',
    //     changeOrigin: true,
    //     ws: true,
    //     pathRewrite: {
    //       '^/api': 'http://192.168.4.145:3002'
    //     }
    //   }
    // }
  },
  // alias快速访问
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('/components'))
      .set('~', resolve('/utils'))
      .set('api', resolve('/api/index'))
      .set('img', resolve('/assets'))
  }
}

项目结构

注意事项

• 单页面模式中不能使用vue-router，开发模式中可正常预览，但打包会造成白屏
• vuex、bus等全局通信方式可正常使用