vue3+vite 前端打包不缓存配置
最近遇到前端部署后浏览器得清缓存才能出现最新页面效果得问题
所以…按以下方式配置完打包就没啥问题了,原理很简单就是加个时间戳
/* eslint-disable no-undef */
import {defineConfig, loadEnv} from 'vite'
import path from 'path'
import createVitePlugins from './vite/plugins'
const nowTime = new Date().getTime()
// https://vitejs.dev/config/
export default defineConfig(({mode, command}) => {
const env = loadEnv(mode, process.cwd())
const {VITE_APP_ENV} = env
return {
// 部署生产环境和开发环境下的URL。
// 默认情况下,vite 会假设你的应用是被部署在一个域名的根路径上
base: VITE_APP_ENV === 'production' ? '/' : '/',
plugins: createVitePlugins(env, command === 'build'),
resolve: {
alias: {
// 设置路径
'~': path.resolve(__dirname, './'),
// 设置别名
'@': path.resolve(__dirname, './src'),
UTILS: path.resolve(__dirname, './src/utils'),
},
// https://cn.vitejs.dev/config/#resolve-extensions
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
},
css: {
preprocessorOptions: {
scss: {
// additionalData: `@use "@/assets/styles/variables.module.scss" as *;`,
},
},
postcss: {
plugins: [
{
postcssPlugin: 'internal:charset-removal',
AtRule: {
charset: (atRule) => {
if (atRule.name === 'charset') {
atRule.remove()
}
},
},
},
],
},
},
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
return 'vendor'
}
// if (id.includes('components')) {
// return 'components'
// }
return null // 不需要特殊处理的模块
},
chunkFileNames: ({name}) => {
if (name === 'vendor') {
return `assets/js/[name]-[hash].js` // 第三方库不添加时间戳
} else {
return `assets/js/[name]-[hash]-${nowTime}.js` // 自定义文件名,使用时间戳保证唯一性
}
},
entryFileNames: ({name}) => {
if (name === 'vendor') {
return `assets/js/[name]-[hash].js` // 第三方库不添加时间戳
} else {
return `assets/js/[name]-[hash]-${nowTime}.js` // 自定义文件名,使用时间戳保证唯一性
}
},
assetFileNames: `assets/[ext]/[name]-[hash].[ext]`, // 资源文件添加时间戳
},
},
},
}
})
重点是这个
打包后的效果截图