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. js里调用函数时,函数名带括号与不带括号的区别

    function test(){ return 1;}var a=test;console.log(a);//输出[Function: test]var b=test();console.log(b) ...

  2. spark中的scalaAPI之RDDAPI常用操作

    package com.XXX import org.apache.spark.storage.StorageLevel import org.apache.spark.{SparkConf, Spa ...

  3. [51 Nod 1584] 加权约数和

    题意 求∑i=1N∑j=1Nmax(i,j)⋅σ1(ij)\large \sum_{i=1}^N\sum_{j=1}^Nmax(i,j)\cdot\sigma_1(ij)i=1∑N​j=1∑N​max ...

  4. [Javascript] Sort by multi factors

    For example, we have a 2D arrays; const arys = [ [], [], [] ]; We want to sort by the number first, ...

  5. 洛谷 P2571 [SCOI2010]传送带 题解

    每日一题 day51 打卡 Analysis 这道题是用非常恶心的三分套三分做的,有一个技巧是不要枚举坐标,枚举两条线段构成三角形的相似比就好了. 了解思路就还挺好写的(尽管我还调了三天) #incl ...

  6. ML.NET 笔记

    ROC曲线 ROC空间将偽陽性率(FPR)定義為 X 軸,真陽性率(TPR)定义为 Y 轴. TPR:在所有實際為陽性的樣本中,被正確地判斷為陽性之比率. FPR:在所有實際為阴性的样本中,被錯誤地判 ...

  7. 虚拟机Linux系统ip查询失败问题

    当用SSH连接Linux需要ip地址,但是不论是通过ipconfig命令,还是通过ip addr命令都无法获取Linux的ip,通过以下方法成功解决了该问题: 1.点击编辑里面的虚拟网络编辑器出现如下 ...

  8. 蚂蚁金服开源机器学习工具SQLFlow,机器学习比SQL还简单

    来自:开源最前线(ID:OpenSourceTop) 综合自:AI前线.https://github.com/sql-machine-learning/sqlflow 5月6日,蚂蚁金服副 CTO 胡 ...

  9. 原创:logistic regression实战(一):SGD Without lasso

    logistic regression是分类算法中非常重要的算法,也是非常基础的算法.logistic regression从整体上考虑样本预测的精度,用判别学习模型的条件似然进行参数估计,假设样本遵 ...

  10. eclipse为项目设置jdk

    1)在项目上右键选中properties,会进入如下界面 (2)然后点击Add Library,进入设置Library的界面 (3)选中JRE System Library进入下一界面就可以设置jdk ...