关于Vue-cli3.0 的配置。pages.chunks的参数的意义

Hello_World20
  • 478

进行Vue-cli3.0进行多页面配置的时候遇到了问题。
如果我给vue.confog.js里的pages对象加上chunks参数的话,打包出来的入口index.html里面不会自动引入js文件,导致js根本不执行。

不太明白vue.config.js里的 pages.chunks数组里面各个值的意义。有大佬能解释一下吗。官网的两句话完全解释不清楚啊。

https://cli.vuejs.org/zh/conf...

// 在这个页面中包含的块,默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']

晚点扔源码,暂时上不了github.....

// vue.config.js
const isDev = process.env.NODE_ENV !== 'production'

const businessArray = [
    {chunk: 'note', chunkName: '短信通知服务'},
    {chunk: 'evaluate', chunkName: '风险评估'}
]

let pages = {}

businessArray.forEach(v => {
    pages[v.chunk] = {
        // page 的入口
        entry: `src/business/${v.chunk}/index.js`,
        // 模板来源
        template: 'public/index.html',
        // 在 dist/index.html 的输出
        filename: `business/${v.chunk}/index.html`,
        // 当使用 title 选项时,
        // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
        title: v.chunkName,
        // 在这个页面中包含的块,默认情况下会包含
        // 提取出来的通用 chunk 和 vendor chunk。
        // 加上这个chunks的话,本地跑不起来。没有引入js。不知道为什么
        // 而且加不加,打包出来的效果都是一样的
        // chunks: ['chunk-vendorssss', 'chunk-common', `${v.chunk}/index.html`]
    }
})

module.exports = {
    baseUrl: isDev ? '/' : '../',
    pages,
    assetsDir: 'common'
}
评论
阅读 8.7k
3 个回答

找到问题了。

vue-cli3里的vue.config.js中的pages参数是会编译到webpack中的html-webpack-plugin的配置里。
所以vue.config.js中的pages.chunks也就等同于html-webpack-plugin中的chunks。所以参数的意义可以参考这个https://segmentfault.com/a/1190000007294861#articleHeader9

可以用vue-cli-service inspect命令打印出来的webpack配置来检查效果

另外。vue.config.js中的pages也不止官方给的那几个参数:entry, template, filename, title 和 chunks,也可以给pageshtml-webpack-plugin能接受的参数,比如favicon(亲测可以,其他参数懒得去尝试)

再另外。跑本地服务器(vue-cli-service serve)时是不会插入chunk-vendorschunk-common的。要打生产包(vue-cli-service build)然后看入口index.html才能看到html-webpack-plugin插入了chunk-vendorschunk-common

举个例子:

// vue.config.js
const businessArray = [
    {chunk: 'note', chunkName: '短信通知服务'},
    {chunk: 'evaluate', chunkName: '风险评估'}
]

let pages = {}

businessArray.forEach(v => {
    pages[v.chunk] = {
        // page 的入口
        entry: `src/business/${v.chunk}/index.js`,
        // 模板来源
        template: 'public/index.html',
        // 在 dist/index.html 的输出
        filename: `business/${v.chunk}/index.html`,
        // 当使用 title 选项时,
        // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
        title: v.chunkName,
        // 在这个页面中包含的块,默认情况下会包含
        // 提取出来的通用 chunk 和 vendor chunk。
        chunks: ['chunk-vendors', `${v.chunk}`],
        favicon: 'public/favicon.ico'
    }
})

module.exports = {
    pages
}

编译过后的webpack配置为

vue-cli-service inspect > webpack.js
// webpack.js
new HtmlWebpackPlugin(
      {
        templateParameters: function () { /* omitted long function */ },
        chunks: [
          'chunk-vendors',
          'note'
        ],
        template: 'public/index.html',
        filename: 'business/note/index.html',
        title: '短信通知服务',
        favicon: 'public/favicon.ico'
      }
    ),
    /* config.plugin('html-evaluate') */
    new HtmlWebpackPlugin(
      {
        templateParameters: function () { /* omitted long function */ },
        chunks: [
          'chunk-vendors',
          'evaluate'
        ],
        template: 'public/index.html',
        filename: 'business/evaluate/index.html',
        title: '风险评估',
        favicon: 'public/favicon.ico'
      }
    ),

1、产生的效果

pages.chunks 取自webpack插件 HtmlWebpackPlugin 里面的 chunks 属性,在打包的时候会被插入到入口文件index.html里面,他大概长这样

<!DOCTYPE html>
<html lang="en">
  ...
  <body>
    <div id="app"></div>
    <!-- 注意下面这个家伙,就是它,文件名以chunk-vendors开头 -->
    <script type="text/javascript" src="/module_a/js/chunk-vendors.72b338bb.js"></script>
  </body>
</html>

2、从哪里看配置

如果你使用@vue/cli, 使用命令 vue inspect可以查看到配置里面有这么一段代码:

new HtmlWebpackPlugin(
  {
    title: 'test',
    templateParameters: function () { /* omitted long function */ },
    // 看他看他
    chunks: [
      'module_a',
      'chunk-vendors',
      'chunk-common'
    ],
    template: './public/index.html',
    filename: 'module_a.html',
    minify: {},
    inject: true
  }
)

3、为什么配置的是chunk-vendors和chunk-common,而不是其他?

继续使用 vue inspect, 可以看到有这样一段代码:

optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          name: 'chunk-vendors',
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: 'initial'
        },
        common: {
          name: 'chunk-common',
          minChunks: 2,
          priority: -20,
          chunks: 'initial',
          reuseExistingChunk: true
        }
      }
    }
}

Vue对生产环境代码的打包进行了处理,对 node_modules 和使用超过两次的文件提取到公共部分,生成了名称以 chunk-vendorschunk-common 开头的文件,所以我们需要在模块入口文件里面引入这两个模块。

我这个chunks按照你上面的来也没有变换。。。。怎么弄得

宣传栏