问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
Hello_World20
    4803715

    进行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'
}
    vue-clivue.jswebpack
    阅读 19.9k
    3 个回答
    得票最新
    头像
    Hello_World20
      4803715
      ✓ 已被采纳

      找到问题了。

      其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），也可以给pages传html-webpack-plugin能接受的参数，比如favicon（亲测可以，其他参数懒得去尝试）

      再另外。跑本地服务器(vue-cli-service serve)时是不会插入chunk-vendors和chunk-common的。要打生产包(vue-cli-service build)然后看入口index.html才能看到html-webpack-plugin插入了chunk-vendors和chunk-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'
      }
    ),
      头像
      Tenadolanter
        102921

        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-vendors 和 chunk-common 开头的文件，所以我们需要在模块入口文件里面引入这两个模块。

        头像
        Bestime
          4.8k2638

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

          查看全部 3 个回答
          推荐问题
          宣传栏