vue3 chunk-vendors 问题

Question

我现在是一个vue3的多页面应用
vue.config.js 配置如下

module.exports = {
  pages: {
    index: {
      entry: './src/pages/index.ts',
      output: 'index.html',
      filename: 'index.html',
      chunks: ['chunk-vendors', 'index']
    },
    user: {
      entry: './src/pages/user.ts',
      output: 'user.html',
      filename: 'index.html',
      chunks: ['chunk-vendors', 'user']
    }
  }
}

pages/index.ts

import { createApp } from 'vue'
import App from './index.vue'
import '../assets/scss/base.scss'

const app = createApp(App)
app.mount('#app')

pages/index.vue

<template>
  <div class="page page-index">
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Index'
})
</script>

<style lang="scss">
.page {
  width: 100%;
  height: 100vh;
  background: #f8f8f8;
}
</style>

pages/user.ts

import { createApp } from 'vue'
import App from './user.vue'
import '../assets/scss/base.scss'

const app = createApp(App)
app.mount('#app')

pages/user.vue

<template>
  <div class="page page-user"></div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'User'
})
</script>

<style lang="scss">
.page {
  width: 100%;
  height: 100vh;
  background: #f8f8f8;
}
</style>

此时执行yarn run build 生成文件为

之后我在index.vue中增加组件

components/CustomHeader.vue

<template>
  <div class="custom-header"></div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'CustomHeader'
})
</script>

<style lang="scss" scoped>
  .custom-header {
    width: 100%;
    height: 44px;
    background: #f00;
  }
</style>

修改 pages/index.vue

之后执行 yarn run build

此时我发现生成的三个文件的hash值都产生了变化，如何不让 chunk-vendors 和 user 发生变化，这个配置要如何修改。

就是我修改那个页面 那么这个只有这一个页面的hash值发生变化 这个要如何做到。

Answer 1

可以使用contenthash，使用方法网上很多
https://blog.csdn.net/Neokeke...