vue-cli3 每次打包都改变css img js文件名,还有自带版本号
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文件名,还有自带版本号的更多相关文章
- vue cli3.0打包
1.vue cli3.0需要在项目根目录下配置webpack 包括反向代理以及打包文件路径 const webpack = require("webpack"); module. ...
- vue 打包后app.css,verondor.js文件过大
参考:https://blog.csdn.net/feiyu_may/article/details/80987404 https://blog.csdn.net/qq_4199961 ...
- 「Vue」vue cli3项目打包为APP方法及坑点
1.执行npm run build之后生成dist文件夹 2.打开HBuilderX新建一个APP项目 3.把dist文件夹里的所有文件拷贝替换到APP文件夹下 4.打开manifest.json文件 ...
- vue中导入外面文件(css,js)方式
有时我们需要导入外面的css文件(例如reset.css文件,bootstrap.css,jQuery.js文件),通常可通过import "name.css"的形式 对于rese ...
- 【vue】——CDN或全局引入CSS、JS。
在入口文件index.html中添加 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- 用python给html里的css及js文件链接自动添加版本号
传统的给文件链接添加版本号的方法是使用gulp-rev,这里提出的解决方案是使用python来替代gulp-rev. import os import re import uuid import sy ...
- webpack打包处理html、css、js、img、scss文件
webpack --help 查看webpack命令启动服务 npm run dev (先配置好服务)进入对应文件夹并初始化npmcd demo npm init 安装webpack npm inst ...
- vue+webpack项目打包后背景图片加载不出来问题解决
在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...
- @vue/cli3+配置build命令构建测试包&正式包
上一篇博客介绍了vue-cli2.x配置build命令构建测试包和正式包,但现在前端开发vue项目大多数使用新版@vue/cli脚手架搭建vue项目(vue create project-name) ...
随机推荐
- [转] C++ explicit关键字详解
本文转自tiankong19999 首先, C++中的explicit关键字只能用于修饰只有一个参数的类构造函数, 它的作用是表明该构造函数是显示的, 而非隐式的, 跟它相对应的另一个关键字是impl ...
- Jquery无须浏览实现直接下载文件
一.常用方式: 1.通常GET方式 后面带明文参数,不安全. window.location.href = 'http://localhost:1188/FileDownload.aspx?token ...
- 学习Spring-Data-Jpa(十六)---@Version与@Lock
1.问题场景 以用户账户为例,如果允许同时对某个用户的账户进行修改的话,会导致某些修改被覆盖,使最后的结果不正确. 如:1.1.张三的账户中有100元. 1.2.张三的账户消费了50元. 1.3.张三 ...
- LeetCode 787. Cheapest Flights Within K Stops
原题链接在这里:https://leetcode.com/problems/cheapest-flights-within-k-stops/ 题目: There are n cities connec ...
- 2019-2020-1 20199302《Linux内核原理与分析》第九周作业
一.进程调度的时机 硬中断和软中断 中断:程序执行过程中的强制性转移到操作系统内核相应的处理程序,起到切出指令流的作用. 中断处理程序:与进程无关的内核指令流. 进程切换:切换两个进程的内核堆栈. 硬 ...
- 样式声明对象:document.styleSheets[0].rules[4].style;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- .net core 根据已有数据库创建实体Model
这三个引用需要与.net core 版本一致,否则后续其他操作时会出错 可以到NuGET包中找到对应的版本然后添加,或者使用一下语句将版本号修改为.net core对应的版本然后执行 Install- ...
- 2019.12.07 java基础
编译时报错,叫做编译失败 class Demo01 { public static void main(String[] args) { int a; a=12; System.out.println ...
- 洛谷P4047 [JSOI2010]部落划分题解
洛谷P4047 [JSOI2010]部落划分题解 题目描述 聪聪研究发现,荒岛野人总是过着群居的生活,但是,并不是整个荒岛上的所有野人都属于同一个部落,野人们总是拉帮结派形成属于自己的部落,不同的部落 ...
- Linux查看当前操作系统版本信息
.Linux查看当前操作系统版本信息 cat /proc/version Linux version -.el6.x86_64 (mockbuild@c1bm.rdu2.centos.org) (gc ...