打包完成后js文件跟着的hash值

打包完成后，js文件跟着的hash值是为了解决浏览器缓存问题，确保用户能够获取最新的代码。每次打包后，如果文件内容发生变化，hash值也会随之改变，这样浏览器就会重新请求新的文件，而不是使用缓存中的旧文件。

相关问题

Vue打包后修改js配置文件

可以通过以下步骤来修改Vue打包后的js配置文件：

1. 找到打包后的js配置文件，通常位于"dist"文件夹中，名为"app.[hash].js"（其中[hash]是一个随机字符串）。

2. 将该文件复制到一个新的文件夹中，例如"config"文件夹。

3. 在该文件夹中创建一个新的js配置文件，例如"config.js"。

4. 在"config.js"中定义你需要修改的配置项，例如：

export default {
  apiUrl: "https://api.example.com",
  debug: false,
  ...
}

5. 在"app.[hash].js"中找到需要修改的配置项所在的代码段，例如：

const config = {
  apiUrl: "https://api.production.com",
  debug: true,
  ...
};

6. 将该代码段替换为以下代码：

import config from "./config";

const finalConfig = {
  ...config,
  apiUrl: "https://api.production.com",
  debug: true,
  ...
};

// 使用finalConfig作为配置项

7. 重新打包你的Vue应用程序，确保新的配置项已生效。

vue 计算文件hash值

可以使用webpack的file-loader插件来计算文件的hash值，具体步骤如下：

1. 安装file-loader插件

npm install file-loader --save-dev

2. 在vue的webpack配置文件中添加file-loader插件的配置

module.exports = {
  // ...其他配置
  chainWebpack: (config) => {
    config.module
      .rule('images')
      .use('file-loader')
      .loader('file-loader')
      .tap(options => {
        // 修改file-loader的配置，计算文件的hash值
        options.name = '[name].[hash:8].[ext]'
        return options
      })
  }
}

3. 在vue组件中引入文件时，使用相对路径，并且不需要加上文件后缀名

<template>
  <div>
    <img :src="imgUrl">
  </div>
</template>
<script>
export default {
  data () {
    return {
      imgUrl: require('./assets/img/test')
    }
  }
}
</script>

这样，在打包构建时，会自动计算文件的hash值，并将文件名修改为`test.8位hash值.jpg`的形式。