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. 项目Alpha冲刺(10/10)

    1.项目燃尽图 2.今日进度描述 项目进展 完成测试 问题困难 测试用例的设计 心得体会 目标快要完成,队员士气较高 3.会议照片 4.各成员情况 221600106 今日进展 根据测试结果修改代码 ...

  2. python开发笔记之zip()函数用法详解

    今天分享一篇关于python下的zip()函数用法. zip()是Python的一个内建函数,它接受一系列可迭代的对象作为参数,将对象中对应的元素按顺序组合成一个tuple,每个tuple中包含的是原 ...

  3. 记录一下使用element ui使用级联选择器的坑,级联选择器的默认选中

    Cascader 级联选择器 使用级联选择器我使用的是默认选中值 下面是我的数据格式,只是形式相同,值不同, 后台的数据是这样的不是ID //级联选择器 <el-cascader :props= ...

  4. strcspn函数的用法

    #include <string.h> main() { char *str = "Linux was first developed for 386/486-based pcs ...

  5. 【NOIP2015】斗地主 D1 T3 及 增强版 (送命题)

    恶心送命模拟题 暴搜顺子,DP预处理剩下的. 由于官方数据太水,很多情况没有讨论的都能过普通版本,想要测试自己代码正确性的同学们可以交交这道题,有很多dalao给出了hack数据 : Luogu P2 ...

  6. Tensorflow细节-P290-命名空间与tensorboard上的节点

    讲解几个重点知识 1.对于tf.get_variable()中的reuse,意思是,如果有名字一模一样的变量,则对这个变量继续使用,如果没有名字一模一样的变量,则创建这个变量 2.options=ru ...

  7. POJ P1985 Cow Marathon 题解

    这道题是我们考试的第一题,非常水,就是一个树的直径的板子.详见上一篇博客. #include<iostream> #include<cstdio> #include<cs ...

  8. vue解决大文件断点续传

    一.概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载.在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了.一般断点下载时才用到Range和Content- ...

  9. PHP正则表达式提取html超链接中的href地址

    $preg='/<a .*?href="(.*?)".*?>/is'; preg_match_all($preg,$str,$array2); ;$i<count ...

  10. React_03_ECMAScript6

    1.ES6解构赋值 1.1.解构赋值概述 解构赋值是对赋值运算符的扩展. 它是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值.在代码书写上简洁且易读,语义更加清晰明了:也方便了复杂对象中数 ...