vue修改入口文件名字_Vue.config.js 增加( js. css)版本号 ,修改文件名称

场景: 增加 js, css 版本号 , 避免缓存

方案: Vue Cli3 的Vue.config.js 中的 configureWebpack 进行配置:

output 配置js

plugins 配置css

下方js路径 决定了 在dist 中文件路径

process.env.VUE_APP_VERSION = require(’./package.json’).version

configureWebpack: {

plugins: [

isProductionEnvFlag && isOpenPrerenderSPA

? new require('prerender-spa-plugin')({

// Required - The path to the webpack-outputted app to prerender.

staticDir: path.join(__dirname, 'dist'),

// Required - Routes to render.

routes: ['/', '/explore']

})

: () => {},

isProductionEnvFlag ? new SizePlugin() : () => {},

new MiniCssExtractPlugin({

// 修改打包后css文件名

filename: `css/[name].${Timestamp}.css`,

chunkFilename: `css/[name].${Timestamp}.css`

})

],

output: {

// 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】

filename: `js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,

chunkFilename: `js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`

}

},

在上面代码之前准备: 时间戳

作为版本号 ; MiniCssExtractPlugin

//添加版本号 此处用时间戳

const Timestamp = new Date().getTime()

// 处理 css 时 引入MiniCssExtractPlugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin')