vue.config.js的filenameHashing选项

最新推荐文章于 2025-10-11 19:30:31 发布
原创 最新推荐文章于 2025-10-11 19:30:31 发布 · 7.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文件名hash是有一个默认为true的值，如果在配置文件vue.config.js中不写，则默认为true。
生成的代码如下，对js的文件引用都变成了hash之后的文件名，
在这里插入图片描述
在开发时，如果不想用文件夹hash，则指定此选项为false即可

在这里插入图片描述
vue.config.js

module.exports= {
filenameHashing:false,
}
vue.config.js配置文件
weixin_42551921的博客
01-23 1861
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。 vue.config.js配置 配置选项 publicPath Type: string Default: ‘/’ 这个值也可以被设置为空字符串 (’’) 或是相对路径 (’./’)，这样所有的资源都会被链接为相对
Vue CLI 配置详解：publicPath、outputDir、assetsDir、indexPath、filenameHashing、configureW
api_git355的博客
09-23 1683
作为一个开发人员，了解 Vue CLI 的配置选项是非常重要的，因为它们可以帮助我们更好地控制项目的构建和输出结果。在本文中，我们将详细介绍几个常用的 Vue CLI 配置选项，包括：publicPath、outputDir、assetsDir、indexPath、filenameHashing、configureWebpack 和 productionSourceMap。如果你的项目中还没有该文件，可以在项目根目录下创建一个，并将配置选项以模块导出的方式进行配置。请注意，以上的示例代码都是在。
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
12-02
执行 npm run build 之后的 dist 目录的静态资源的文件名多会追加上 hash 值，比如: page1.f151b4d3.js 那如果不要 hash 呢，你只需要配置 vue.config.js 文件中的 filenameHashing 官方文档也提到了因为 html 也是我们通过插件生成的，静态资源直接就 inject 进去的，所以，当 html 不是自动生成或者其他情况时候，就不能加 hash 了，可以配置 false。 filenameHashing: false 我们看看源码实现： 首先它是 vue.config.js 的一个配置，在文件 cli-service/li
【Vue CLI】三、详解Vue-cli3配置之filenameHashing使用和源码设计使用和源码设计
qwertyuiopasdfghjklzxcvbnm
05-06 3561
执行 npm run build 之后的 dist 目录的静态资源的文件名多会追加上 hash 值，比如: page1.f151b4d3.js 那如果不要 hash 呢，你只需要配置 vue.config.js 文件中的 filenamehashing 官方文档也提到了因为 html 也是我们通过插件生成的，静态资源直接就 inject 进去的，所以，当 html 不是自动生成或者其他情况时候，就不能加 hash 了，可以配置 false。 filenamehashing: fa...
Vue CLI（三）vue.config.js 配置文件详解
onlymscn的博客
10-11 1134
是 Vue CLI 项目的总配置文件，参数丰富，可高度定制项目行为。常用参数如publicPathoutputDirdevServercss等。webpack 相关配置推荐用和。多页面开发用pages。开发服务器、代理用devServer。你可以在.env文件中定义变量（如在和项目代码中都可以通过访问。支持高度自定义，适用于大部分实际项目需求通过可定制 webpack 行为devServercss等覆盖开发、构建、样式、插件等方方面面多用环境变量和条件判断，让配置更灵活。
Vue CLI webpack配置属性——filenameHashing
xingchen678的博客
06-18 3156
filenameHashing Type: boolean Default: true 用途 设置打包生成的的静态资源的文件名中是否加入hash以便控制浏览器缓存问题。 用法 module.exports = { publicPath: './', // 基本路径 outputDir: 'dist', // 输出文件目录 assetsDir: './assets', indexPath: 'index.html', filenameHashing: true, // 生成的静态资
Vue CLI4.0 webpack配置属性——filenameHashing
Jay的博客
04-28 6098
filenameHashing Type: boolean Default: true 用途 设置打包生成的的静态资源的文件名中是否加入hash以便控制浏览器缓存问题。 用法 module.exports = { publicPath: './', // 基本路径 outputDir: 'dist', // 输出文件目录 assetsDir: './assets', index...
vue3.0的vue.config.js详解和完整配置
qq_42755622的博客
10-02 4130
自定义打包后js文件的路径及文件名字。
vue.config.js常用配置详解
12-13
以上只是`vue.config.js`中的一部分配置，Vue CLI还提供了许多其他配置选项，如调整Webpack配置、添加自定义插件等，允许开发者对项目的构建过程进行深度定制，以满足特定需求。通过了解并熟练运用这些配置，可以更...
vue-cli3中vue.config.js配置教程详解
12-07
`vue.config.js` 文件就是用来进行这些自定义配置的地方。 在 `vue.config.js` 文件中，我们可以设置多个关键配置项来调整项目的行为。以下是一些重要的配置选项及其用途： 1. **publicPath**：这个选项用于设定...
Vue CLI 3 中 Vue.config.js 配置教程
最新发布
11-18
本文将详细介绍 `vue.config.js` 的配置选项及其用法。 `vue.config.js` 是 Vue CLI 3 的配置文件，位于项目的根目录下。 当需要覆盖默认的 Webpack 配置时，我们可以通过这个文件进行自定义设置。 以下是一些常见...
vue cli3.x webpack去掉 打包自动生成的js、css文件hash版本号
热门推荐
superKM的博客
10-09 1万+
vue cli3打包默认生成文件会自带随机hash值 如果想要去掉中间的版本控制 首先先在根目录配置好vue.config.js文件 在vue.config.js文件中 module.exports = { // webpack配置 chainWebpack: config => { if (process.env.NODE_ENV === 'p...
vue.config.js
qq_41988669的博客
08-21 2186
默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。例如，如果你的应用被部署在 https://www.my-app.com/my-app/, 则设置 publicPath 为 /my-app/。默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。‘./’ : ‘/’这个会值也可以被设置为空字符串（”“）或是相对路径（”./"), 这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。
jmeter 接口参数同时包含parameter和文件
Hoppaz的博客
09-27 541
第一步： Http Header Manager中不要添加Name为“Content-type”的header，猜测由于参数和文件分别属于不同的content-type，所以要在参数和文件处具体填写 第二步：在参数和文件处，添加具体的content-type，参照Content Type 类型，此处我的number是一个字符串，所以content type是text/plain。 文件是一个视频，由于jmeter要求上传文件都需要在Use multipart/form-data处打钩，此时File Up
去除：Vue项目打包后生成的.map文件&文件hash值命名
michiko98的博客
03-21 1592
文件中设置productionSourceMap和filenameHashing项为false即可。
ERROR Invalid options in vue.config.js: "filenameHashing" is not allowed
我有一个梦想的专栏
11-15 9499
最近使用vue作为前端开发的框架，前端开发完毕后需要使用vue cli3 编译成静态文件，编译的文件不需要hash,因此加入配置： module.exports = { baseUrl: BASE_URL, outputDir: 'dist', filenameHashing: false, chainWebpack: config => { config.plu...
vue项目部署配置（hash,history模式）
山谷里的杂货铺
11-22 940
1、history模式配置 vue.config.js router.js 2、hash模式
添加时间-项目 vue-config--hash解决线上包未更新
csstmg的博客
10-15 290
<title><%= htmlWebpackPlugin.options.title %></title> vue.config.js const path = require('path') const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin // const UglifyJsPlugin = require('uglifyjs-webpac..
VUE2的vue.config.js配置详解 vue.config.js配置详解注释
10-01
`vue.config.js` 是一个可选的配置文件，若项目根目录中存在该文件，它会被自动加载，用于对 Vue CLI 项目进行个性化配置。以下是对 `vue.config.js` 常见配置项的详细解释以及带有注释的配置示例： ```javascript module.exports = { // 部署应用包时的基本 URL // 例如，假设应用部署在 https://example.com/my-app/，则应设置为 '/my-app/' publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/', // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录 outputDir: 'dist', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 assetsDir: 'static', // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径 indexPath: 'index.html', // 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存 // 可以通过将这个选项设为 false 来关闭文件名哈希 filenameHashing: true, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码 // 设置为 true 或 'warning' 时，eslint-loader 会将 lint 错误输出为编译警告 // 设置为 'default' 时，eslint-loader 会将 lint 错误输出为编译错误 // 设置为 false 则取消 eslint 检查 lintOnSave: process.env.NODE_ENV !== 'production', // 是否使用包含运行时编译器的 Vue 构建版本 // 设置为 true 后可以在 Vue 组件中使用 template 选项 runtimeCompiler: false, // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件 // 可以通过这个选项来覆盖默认配置 transpileDependencies: [], // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建 productionSourceMap: false, // 配置 webpack-dev-server 行为 devServer: { // 指定要监听请求的端口号 port: 8080, // 是否自动打开浏览器 open: true, // 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层 overlay: { warnings: false, errors: true }, // 代理配置，用于解决跨域问题 proxy: { '/api': { target: 'http://localhost:3000', // 代理的目标地址 changeOrigin: true, // 是否改变请求的源 pathRewrite: { '^/api': '' // 重写请求路径 } } } }, // 配置 webpack configureWebpack: { // 配置 webpack 的插件 plugins: [ // 示例：添加自定义插件 // new MyCustomPlugin() ] }, // 链式操作 webpack 配置 chainWebpack: config => { // 修改图片加载器的配置，限制图片大小 config.module .rule('images') .use('url-loader') .loader('url-loader') .tap(options => { // 修改它的选项... options.limit = 10000 return options }) }, // CSS 相关配置 css: { // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码) extract: process.env.NODE_ENV === 'production', // 是否为 CSS 开启 source map sourceMap: false, // 向 CSS 相关的 loader 传递选项 loaderOptions: { css: { // 这里可以设置 css-loader 的选项 }, sass: { // 传递给 sass-loader 的选项 prependData: `@import "~@/styles/variables.scss";` } } }, // 第三方插件配置 pluginOptions: { // 示例：配置 vue-cli-plugin-style-resources-loader 'style-resources-loader': { preProcessor: 'scss', patterns: [ // 自动注入到每个组件中的样式文件 path.resolve(__dirname, './src/styles/globals.scss') ] } } }; ``` ### 配置解释： 1. **`publicPath`**：部署应用包时的基本 URL。在开发环境和生产环境可以设置不同的值，用于指定应用的访问路径。 2. **`outputDir`**：指定生产环境构建文件的输出目录。 3. **`assetsDir`**：指定静态资源的存放目录，相对于 `outputDir`。 4. **`indexPath`**：指定生成的 `index.html` 的输出路径。 5. **`filenameHashing`**：是否在生成的静态资源文件名中包含 hash，用于控制缓存。 6. **`lintOnSave`**：控制在开发环境下是否进行 eslint 检查。 7. **`runtimeCompiler`**：是否使用包含运行时编译器的 Vue 构建版本。 8. **`transpileDependencies`**：指定需要进行 Babel 转译的依赖包。 9. **`productionSourceMap`**：是否生成生产环境的 source map。 10. **`devServer`**：配置开发服务器的行为，如端口号、自动打开浏览器、代理等。 11. **`configureWebpack`**：直接配置 webpack，可以添加插件等。 12. **`chainWebpack`**：通过链式操作修改 webpack 配置。 13. **`css`**：配置 CSS 相关的选项，如是否提取 CSS、是否生成 source map 等。 14. **`pluginOptions`**：配置第三方插件的选项。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值