vue 多入口配置

833 阅读1分钟

话不多说直接上代码 新建一个html文件

image.png

image.png 将你需要拆分出来的入口独立出来

image.png 里面的文件都建议独立配置(以便后期维护方便)

image.png

划重点!! vue.config.js文件中添加配置文件

image.png

image.png

before: function(app) {
      const base = baseUrl.replace(/\/+$/, '') // 移除尾部斜杠
      app.get(`${base}/:page/*`, function(req, res, next) {
        if (['chatGPT', 'index'].includes(req.params.page)) {
          // 把 /<base>/<page>/* 重定向到 /<base>/<page>/
          req.url = `${base}/${req.params.page}/`
          next('route')
        } else {
          next()
        }
      })
    }
pages: {
    chatGPT: {
      entry: 'src/chatGPT/chatGPT.main.js',
      template: 'public/index_chatGPT.html',
      filename: 'index_chatGPT.html'
    },
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  }

image.png

config.plugin('preload-index').tap(() => [
      {
        rel: 'preload',
        // to ignore runtime.js
        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: 'initial'
      }
    ])
    config.plugin('preload-chatGPT').tap(() => [
      {
        rel: 'preload',
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: 'initial'
      }
    ])

打包成功后会有两个html文件,个域名分别指向这两个html就ok了

image.png

打完收工