今天学到了 - vue多入口配置

1,789 阅读1分钟

通常开发中一般都是vue开发的SPA的单页面应用,也是在这次公司一个低代码平台的开发中了解到了-vue多页面应用。

记录一下多入口的配置

找到vue.config.js文件,在module.exports的域里,找到entry,在那里配置添加多个入口:

image.png

module.exports = {
  publicPath: '/',
  devServer: {
    proxy: {
      '/dev': {
        target: '',
        changeOrigin: true,
        pathRewrite: {
          '^/dev': ''
        }
      }
    }
  },
  configureWebpack: config => {
    config.devtool = 'source-map'
  },
  css: {
    // css预设器配置项
    loaderOptions: {
      sass: {
        // sass-loader如果是V8+的版本,废除了data这个配置项,改为了prependData
        // data: `@import "@/styles/setting-variable.scss";`
        prependData: '@import "@/styles/index.scss";'
      }
    }
  },
  pages: {
    workbench: {
        entry: 'src/modules/workbench/main.js',
        template: 'public/index.html',
        filename: 'multi-page/workbench.html',
        title: 'workbench',
        chunks: ['chunk-vendors', 'chunk-common', 'workbench']
    },
    'home-page': {
      entry: 'src/modules/home-page/main.js',
      template: 'public/index.html',
      filename: 'multi-page/home/home-page.html',
      title: 'home-page',
      chunks: ['chunk-vendors', 'chunk-common', 'home-page']
    },
    'call-log': {
      entry: 'src/modules/call-log/main.js',
      template: 'public/index.html',
      filename: 'multi-page/home/call-log.html',
      title: 'call-log',
      chunks: ['chunk-vendors', 'chunk-common', 'call-log']
    },  
    'seats-manage': {
      entry: 'src/modules/seats-manage/main.js',
      template: 'public/index.html',
      filename: 'multi-page/home/seats-manage.html',
      title: 'seats-manage',
      chunks: ['chunk-vendors', 'chunk-common', 'seats-manage']
    },
    settings: {
      entry: 'src/modules/settings/main.js',
      template: 'public/index.html',
      filename: 'multi-page/home/settings.html',
      title: 'settings',
      chunks: ['chunk-vendors', 'chunk-common', 'settings']
    },
  },
}

这里共配置了5个入口,对应了5个模块

image.png

入口配置后按平时的开发习惯即可,单个模块仍然依照着单页面的方式开发

image.png