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) ...
随机推荐
- JQuery系列(2) - 事件处理
JQuery事件绑定 (1)on方法 on方法是jQuery事件绑定的统一接口.后面介绍的事件绑定的那些简便方法,其实都是on方法的简写形式. $('li').on('click', function ...
- C++报错:全局变量重定义或是多次定义
如何在C++中定义全局变量时避免重复定义呢? 只要在定义时尽量在.cpp文件中进行,而不要在.h 文件中定义,定义好了之后,可以在.h文件中利用extern关键字进行声明. 如果在.h文件中定义的话, ...
- noip初赛试题
链接: https://pan.baidu.com/s/1yoOMIUqMRBnBUPprC3o6HQ&shfl=shareset 提取码: m8ns 复制这段内容后打开百度网盘手机App,操 ...
- Python 3.6 抓取微博m站数据
Python 3.6 抓取微博m站数据 2019.05.01 更新内容 containerid 可以通过 "107603" + user_id 组装得到,无需请求个人信息获取: 优 ...
- LOJ P10013 曲线 题解
每日一题 day38 打卡 Analysis 这道题运用的是三分,就是说具有一定的单调性,找最大最小值,然后和二分基本类似,就是说特性就是说当前两个点比较,较优的点和最优点在相对了较差点的同侧,就是说 ...
- 2019.12.07 java计算
class Demo05{ public static void main(String[] args) { int a=1; a++; int b=1 + a++ + a + a++; System ...
- WinDbg常用命令系列---!heap
!heap 简介 !heap扩展显示堆使用信息.控制堆管理器中的断点.检测泄漏的堆块.搜索堆块或显示页堆信息.此扩展支持段堆和NT堆.使用!heap没有参数列出所有堆及其类型的堆. 使用形式 !hea ...
- proc near/far
proc是定义子程序的伪指令,位置在子程序的开始处,它和endp分别表示子程序定义的开始和结束两者必须成对出现. far是该子程序的属性,决定调用程序和子程序是否在同一代码段如下:为子程序定义及说明, ...
- 51 NOD 1239 欧拉函数之和(杜教筛)
1239 欧拉函数之和 基准时间限制:3 秒 空间限制:131072 KB 分值: 320 难度:7级算法题 收藏 关注 对正整数n,欧拉函数是小于或等于n的数中与n互质的数的数目.此函数以其首名研究 ...
- node省市区三级数据性能测评
闲来无事,测试下node和egg 首先是数据库,大概长这样 然后是代码 'use strict'; const Controller = require('egg').Controller; clas ...