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. git上传者姓名修改

    只需要两个指令 git config user.name 和 git config –global user.name 在控制台中输入git config user.name获取当前的操作名称 修改名 ...

  2. jmeter-多用户循环执行(存储token)

    1.从cvs文件中读取数据 登录接口读取文件: 2.读取token,保存token 在登录接口下添加 设置: 把token保存为全局变量: 设置: 输入${__setProperty(newtoken ...

  3. 在vue项目中使用自己封装的ajax

    在 src 目录下新建 vue.extend.js ,内容如下: export default { install(Vue) { Vue.prototype.$http=function(option ...

  4. postgresql 导入 导出(一张表)

    导入sql   -w  指定数据库名 psql -h 192.168.20.123 -p 5432 -w warehouse < /usr/20180808.sql 导出一张表sql   -w  ...

  5. 讨论---MySQL数据库中null、''、' '区别

    今天在写代码的时候,遇到了一个关于MySQL数据库的问题,发现在表中插入‘’数据的时候插入不进去.发现这张表中的数据没有数据的时候,默认显示的null,当时自己又重复的额试了几次,但是始终没有成功,从 ...

  6. Dubbo源码分析:ThreadPool

    定义了通过URL对象作为参数获取Executor对象的getExecutor方法.所有实现ThreadPool接口的类都是基于ThreadPoolExecuotr对象来实现的. 类图

  7. [NPM + React] Prepare a Custom React Hook to be Published as an npm Package

    Before we publish our package, we want to make sure everything is set up correctly. We’ll cover vers ...

  8. 《三体》刘慈欣英文演讲:说好的星辰大海你却只给了我Facebook

    美国当地时间2018日11月8日,著名科幻作家刘慈欣被授予2018年度克拉克想象力贡献社会奖(Clarke Award for Imagination in Service to Society),表 ...

  9. Java web开发——文件的上传和下载

    一. 功能性需求与非功能性需求 要求操作便利,一次选择多个文件和文件夹进行上传:支持PC端全平台操作系统,Windows,Linux,Mac 支持文件和文件夹的批量下载,断点续传.刷新页面后继续传输. ...

  10. 20-ESP8266 SDK开发基础入门篇--C# TCP客户端编写 , 加入数据通信

    https://www.cnblogs.com/yangfengwu/p/11192594.html 自行调整页面 连接上以后主动发个数据 namespace TCPClient { public p ...