操作指南
1.问题描述
基于vue的项目在每次发布后,需手动清除浏览器缓存,才能显示最新的页面与调用最新的接口,否则页面出错,函数调用不成功。
2.生成时间戳
const Timestamp = new Date().getTime();
2.引入mini-css-extract-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
3.指定js文件地址与文件名添加时间戳
output: {
//修改打包后js名:名称 + 时间戳
filename: `static/js/[name].${Timestamp}.js`,
chunkFilename: `static/js/[name].${Timestamp}.js`
}
4.指定css文件地址与文件名添加时间戳
plugins: [
new MiniCssExtractPlugin({
// 修改打包后css文件名:名称 + 时间戳
filename: `static/css/[name].${Timestamp}.css`,
chunkFilename: `static/css/[name].${Timestamp}.css`
}),
],
5.更改其更改路径,输出路径,打包地址
publicPath: './',//公共路径
outputDir: 'dist',//打包文件名称
assetsDir: 'static'//css、js、img资源打包路径地址
6.全部代码
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const Timestamp = new Date().getTime();
// 使用等比适配插件
module.exports = {
configureWebpack: {
plugins: [
new MiniCssExtractPlugin({
// 修改打包后css文件名
filename: `static/css/[name].${Timestamp}.css`,
chunkFilename: `static/css/[name].${Timestamp}.css`
}),
],
output: {
filename: `static/js/[name].${Timestamp}.js`,
chunkFilename: `static/js/[name].${Timestamp}.js`
}
},
publicPath: './',
outputDir: 'dist',
assetsDir: 'static'
}