vue3 chunk-vendors 问题

我现在是一个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 生成文件为
vue3 chunk-vendors 问题

之后我在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
vue3 chunk-vendors 问题

之后执行 yarn run build
vue3 chunk-vendors 问题

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

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


回答:

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

以上是 vue3 chunk-vendors 问题 的全部内容, 来源链接: utcz.com/p/936032.html

回到顶部