vue-cli3 webpack配置多环境打包，解决浏览器缓存

最新推荐文章于 2022-12-12 20:37:01 发布

红烧金鱼草

最新推荐文章于 2022-12-12 20:37:01 发布

阅读量718

点赞数 1

分类专栏： VUE 文章标签： webpack vue

本文链接：https://blog.youkuaiyun.com/qq_42269433/article/details/106796332

版权

问题1：当时遇到本地，测试服，线上不同的配置，然后一直改代码。就很坑。于是想到多环境打包。

问题2：每次上线后，都有以前的缓存，导致页面不能更新，都需要通知使用者强刷。但是这种方法使用感太差了。

【webpack打包文件加上版本号和时间戳】：

const webpack = require('webpack');
const path = require('path');
const Timestamp = new Date().getTime();
module.exports = {
    publicPath:'/v2',
    productionSourceMap: false,
    lintOnSave: false,
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "~@/assets/css/color.scss";`,
            },
        }
    },
    configureWebpack:{
        output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
            filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
            chunkFilename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
        },
    },
   
    devServer: {
        proxy: {
            '/