let Version = new Date().getTime();

css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: {
//一种方式,打包后的css 会带版本号,不改变文件名的。
filename: 'css/[name].css?v=' + Version, chunkFilename
:
'css/[name].css?v=' + Version
//一种方式,每次打包后的css文件名会变更新。
filename: 'css/[name].[' + Version + '].css', chunkFilename
:
'css/[name].[' + Version + '].css'
}
}
,
chaingWebpack:config => {
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
.tap(options => {
// 修改它的选项...
options.fallback.options.name = 'img/[name].[ext]?' + Version; //去除图片hash
options.limit = 1024; //这是字节(Byte)限制,1KB = 1024Byte ,当图片的大小小于 1KB ,则会被转为 base64格式,打包进js文件,大于1KB,则会被打包进 img 文件夹,供链接请求获取。
return options
});
}
configureWebpack: config => {
config.output.chunkFilename = 'js/[name].[' + Version + '].js' //这种方式适合设备缓存不严重的
config.output.chunkFilename = 'js/[name].js?v=' + Version //这种是给打包后的chunk文件加版本号。
}

有问题请留言,有帮助请点推荐,谢谢!

vue-cli3 每次打包都改变css img js文件名,还有自带版本号的更多相关文章

  1. vue cli3.0打包

    1.vue cli3.0需要在项目根目录下配置webpack  包括反向代理以及打包文件路径 const webpack = require("webpack"); module. ...

  2. vue 打包后app.css,verondor.js文件过大

    参考:https://blog.csdn.net/feiyu_may/article/details/80987404         https://blog.csdn.net/qq_4199961 ...

  3. 「Vue」vue cli3项目打包为APP方法及坑点

    1.执行npm run build之后生成dist文件夹 2.打开HBuilderX新建一个APP项目 3.把dist文件夹里的所有文件拷贝替换到APP文件夹下 4.打开manifest.json文件 ...

  4. vue中导入外面文件(css,js)方式

    有时我们需要导入外面的css文件(例如reset.css文件,bootstrap.css,jQuery.js文件),通常可通过import "name.css"的形式 对于rese ...

  5. 【vue】——CDN或全局引入CSS、JS。

    在入口文件index.html中添加 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  6. 用python给html里的css及js文件链接自动添加版本号

    传统的给文件链接添加版本号的方法是使用gulp-rev,这里提出的解决方案是使用python来替代gulp-rev. import os import re import uuid import sy ...

  7. webpack打包处理html、css、js、img、scss文件

    webpack --help 查看webpack命令启动服务 npm run dev (先配置好服务)进入对应文件夹并初始化npmcd demo npm init 安装webpack npm inst ...

  8. vue+webpack项目打包后背景图片加载不出来问题解决

    在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...

  9. @vue/cli3+配置build命令构建测试包&正式包

    上一篇博客介绍了vue-cli2.x配置build命令构建测试包和正式包,但现在前端开发vue项目大多数使用新版@vue/cli脚手架搭建vue项目(vue create project-name) ...

随机推荐

  1. 深度学习Keras框架笔记之Dense类(标准的一维全连接层)

    深度学习Keras框架笔记之Dense类(标准的一维全连接层) 例: keras.layers.core.Dense(output_dim,init='glorot_uniform', activat ...

  2. The 10th Shandong Provincial Collegiate Programming Contest 2019山东省赛游记+解题报告

    比赛结束了几天...这篇博客其实比完就想写了...但是想等补完可做题顺便po上题解... 5.10晚的动车到了济南,没带外套有点凉.酒店还不错. 5.11早上去报道,济南大学好大啊...感觉走了一个世 ...

  3. Otsu 类间方差法

    又称最大类间方差法.是由日本学者大津(Nobuyuki Otsu)于1979年提出的[1],是一种自适合于双峰情况的自动求取阈值的方法.又叫大津法,简称Otsu.   算法提出初衷是是按图像的灰度特性 ...

  4. width: calc(100% - 80px); 屏幕自适应方法

    width: calc(100% - 80px); 屏幕自适应方法

  5. C++ EH Exception(0xe06d7363)---捕获过程

    书接上文<C++ EH Exception(0xe06d7363)----抛出过程>,下面我们讲下,VC++是如何catch到异常且处理的. 我们知道,在VC++里,C++异常实现的底层机 ...

  6. WinDbg常用命令系列---异常相关操作

    .exr (Display Exception Record) .exr命令显示异常记录的内容. .exr Address .exr -1 参数: Address指定异常记录的地址.如果指定-1作为地 ...

  7. Windbg命令的语法规则系列(三)

    五.源文件行语法 可以将源文件行号指定为MASM表达式的全部或部分.这些数字计算出与该源代码行对应的可执行代码的偏移量.不能使用源代码行作为C++表达式的一部分.必须用重音符(`)将源文件和行号表达式 ...

  8. C# await async Task

    //原文:https://www.cnblogs.com/yan7/p/8401681.html //原文:https://www.cnblogs.com/s5689412/p/10073507.ht ...

  9. flume 测试 hive sink

    测试flume,将数据送到hive表中,首先建表. create table order_flume( order_id string, user_id string, eval_set string ...

  10. mysql right() 函数

    mysql> ); +---------------------+ | right() | +---------------------+ | dedede | +--------------- ...