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) ...
随机推荐
- django-购物车添加
商品详情页detail.html添加加入购物车按钮 <a href="javascript:;" sku_id="{{ sku.id }}" class= ...
- apache commons-configuration包读取配置文件
1.pom依赖添加 <!-- 配置文件读取 --> <dependency> <groupId>commons-configuration</groupId& ...
- linux 统计某个文件的行数
今日思语:迷茫的时候,看看身边那些优秀的人,他们还在那么努力,或许你就可以有点方向和动力了 在linux系统中,我们经常会对文件做行数统计,可以使用如下命令 wc -l file #file为具体的文 ...
- 多项式的各类计算(多项式的逆/开根/对数/exp/带余除法/多点求值)
预备知识:FFT/NTT 多项式的逆 给定一个多项式 F(x)F(x)F(x),请求出一个多项式 G(x)G(x)G(x),满足 F(x)∗G(x)≡1(mod xn)F(x)*G(x) \equiv ...
- C++对象内存布局,this指针,对象作为参数,作为返回值
class TestClass { public: void setNum(int num) { m_num1 = num; } int getNum() { return m_num1; } pri ...
- 【批处理】for命令
for 命令 学习:https://www.cnblogs.com/Braveliu/p/5081087.html FOR这条命令基本上都被用来处理文本,但还有其他一些好用的功能! 看看他的基本格式( ...
- canvas的基本使用
一.定义 canvas最早是由Apple引入Webkit的,<canvas>元素包含于HTML5中 HTML5的canvas元素使用JavaScript在网页上绘制图像,画布是一个矩形区域 ...
- 【loj2339】【WC2018】通道
题目 三棵带边权的树,求 \[ dis1(u,v) + dis2(u,v) + dis3(u,v) \] 的最大值 \(1 \le n \le 10^5\) 题解 对\(T_1\)做边分治,把分治边的 ...
- 微信小程序 按钮固定在页面底部遮住页面显示内容问题
我们分为以下部分来解决这个问题: 第一部分:问题的表现是怎么样的? 第二部分:问题的是如何实现的? 第三部分:如何解决问题? 第一部分:问题的表现是怎么样的? 我设置了页面有0-99共100个数,但是 ...
- 如何利用IIS调试ASP.NET网站程序详解
如何利用IIS调试ASP.NET网站程序详解 更新时间:2019年01月13日 08:44:13 作者:江湖逍遥 我要评论 这篇文章主要给大家介绍了关于如何利用IIS调试ASP.NET网 ...