Vue-cli: 多页面应用，如何将每个页面自身的内容单独打包，例：dist/page1, dist/page2 ?

[galaa2011]

What problem does this feature solve?

多页面build时的输出问题

What does the proposed API look like?

能打包成多个独立模块

[galaa2011]

本来想通过执行vue-cli-service build xxx，获取参数来动态传入pages的内容，发现vue.config.js里也接不到...
求指条明路~

[galaa2011]

3.x的版本限制的太死了，很多不如之前自己写那么灵活

[sodatea]

https://cli.vuejs.org/zh/config/#pages

[galaa2011]

@sodatea 兄dei 你发这个链接就不走心吧

[sodatea]

请说清楚你的需求。

[galaa2011]

多页面配置没毛病，但是我想build出来的内容也能是独立的。即page1下包含完整的css,js,img等这些资源，page2也是。我看现在的情况，默认是混在一起，且vendors里包含了page1、page2共有的库。

[galaa2011]

@sodatea 有好的解决办法，或者思路吗？

[jkzing]

// vue.config.js
const configs = {
  page1: {
    outputDir: 'page1'
    configureWebpack() {
      return {
        entry: 'src/page1.js'
      }
    }
  },
  page2: {
    outputDir: 'page2',
    configureWebpack() {
      return {
        entry: 'src/page2.js'
      }
    }
  }
}

module.exports = configs[process.env.PAGE_CONF]

PAGE_CONF=page1 && npm run build
# or
PAGE_CONF=page2 && npm run build

[qhhsy]

@jkzing 您好，请教下如何打包目录下所有多页呢？

[galaa2011]

@jkzing @sodatea 多谢两位，是这个思路。后来我通过参数判断了，类似build后面的h5、hb：

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "build:h5": "vue-cli-service build h5",
  "build:hb": "vue-cli-service build hb",
  "build:all": "npm run build & npm run build:h5 & npm run build:hb",
  "lint": "vue-cli-service lint",
  "test:unit": "vue-cli-service test:unit"
}

在vue.config.js里通过

let build = process.argv.slice(2)[1];

获取build参数值来传入不同的pages和outputDir

[galaa2011]

@qhhsy 看上面这行~

"build:all": "npm run build & npm run build:h5 & npm run build:hb",

[qhhsy]

谢谢

[qhhsy]

这种情况需要指定打包的页面，能做成自动打包吗？

[lorainwings]

这种情况需要指定打包的页面，能做成自动打包吗？

同问+1

[lh4111]

这种情况需要指定打包的页面，能做成自动打包吗？

+1