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. 1220 Vue与Django前后端的结合

    目录 vue的安装 Vue前端的设置 页面的分布 后台数据的替换 css样式 Django的配置 国际化配置 axios插件安装 CORS跨域问题(同源策略) 处理跨域问题: cors插件 axios ...

  2. Triton 学习

    介绍 Triton 是一款动态二进制分析框架,它支持符号执行和污点分析,同时提供了 pintools 的 python 接口,我们可以使用 python 来使用 pintools 的功能. Trito ...

  3. Spring框架:Controller和RestController区别

    了解如何利用SpringMVC的注释创建RESTful Web服务. Spring的基于注释的MVC框架简化了创建RESTful Web服务的过程.传统的Spring MVC控制器和RESTful W ...

  4. May Cook-Off 2019 解题报告

    太气了.Atcoder unrated了. 这一场时间太不友好了.昨天下午一时兴起就去补了一发.题很好,学到好多东西. Chain Reaction 题意:给一个矩阵,这个矩阵是稳定的当且仅当每一个元 ...

  5. learning scala akka actorySystem create and close

    package com.example import akka.actor.ActorSystem import scala.util.{Failure, Success} import scala. ...

  6. 数组(Array)的常规操作2

    数组的常规操作2 常用属性 length属性:数组的长度: prototype:原型 常用数组(Array)操作方法 form 在一个类数组中创建一个新的数组实列 isArry is就是判断是否为Ar ...

  7. 从一道题浅说 JavaScript 的事件循环

    最近看到这样一道有关事件循环的前端面试题: //请写出输出内容 async function async1() { console.log('async1 start'); await async2( ...

  8. 微信小程序HTTP封装请求

    http.js import utils from "../../utils/utils" var http = utils.http; const douban = " ...

  9. 03-树2 List Leaves (25 分)

    Given a tree, you are supposed to list all the leaves in the order of top down, and left to right. I ...

  10. Truncate使用注意事项

    1.TRUNCATE TABLE 在功能上与不带 WHERE 子句的 DELETE 语句相同:二者均删除表中的全部行.但 TRUNCATE TABLE 比 DELETE 速度快,且使用的系统和事务日志 ...