【2023-7-25】vue项目打包文件去除hash串

**Vue项目打包文件去除 Hash串**

在 Vue项目中，使用 Webpack 作为打包工具时，会生成一个带有 Hash 值的静态资源文件（例如 `index.html` 和 `main.js`）。这种情况下，Hash 值通常是由 Webpack 自动生成的，并且每次构建都会改变。虽然这对于开发和测试来说很方便，但是在生产环境中，这可能会导致一些问题。

本文将介绍如何在 Vue项目中去除 Hash 值，从而生成一个不带 Hash 的静态资源文件。

**为什么需要去除 Hash 值？**

在生产环境中，Hash 值通常是由 Webpack 自动生成的，并且每次构建都会改变。这可能会导致以下问题：

* **缓存失效**:当 Hash 值改变时，浏览器会认为静态资源文件已经更改，从而导致缓存失效。虽然这看起来很好，但实际上，这意味着每次访问网站时，都需要重新下载整个静态资源文件。这可能会导致性能问题。
* **SEO**:Hash 值通常是随机生成的，并且不具有任何意义。在 SEO 中，URL 的结构和内容非常重要。Hash 值的存在可能会干扰 URL 的正常工作。

**如何去除 Hash 值？**

要去除 Hash 值，我们需要修改 Webpack 配置文件（`webpack.config.js`）。具体步骤如下：

1. **安装 `@vue/cli-plugin-configure:webpack``插件**:这个插件提供了一个简单的方法来配置 Webpack。
2. **在 `vue.config.js` 文件中添加以下代码：**

javascriptmodule.exports = {
 // ...
 chainWebpack: (config) => {
 config.output.hashFunction('contenthash');
 },
};

3. **重新构建项目**：使用 `npm run build` 或 `yarn build` 命令重新构建项目。

**如何配置 Hash 值？**

如果你需要在生产环境中保留 Hash 值，但又不想让它随机生成，可以通过以下方式进行配置：

1. **安装 `webpack-hash-plugin` 插件**:这个插件提供了一个简单的方法来配置 Hash 值。
2. **在 `vue.config.js` 文件中添加以下代码：**

javascriptmodule.exports = {
 // ...
 chainWebpack: (config) => {
 config.plugin('hash').use(HashPlugin, [
 {
 hashFunction: 'contenthash',
 hashDigestLength:8,
 },
 ]);
 },
};

3. **重新构建项目**：使用 `npm run build` 或 `yarn build` 命令重新构建项目。

**总结**

在本文中，我们学习了如何去除 Vue项目中的 Hash 值，从而生成一个不带 Hash 的静态资源文件。我们还了解了为什么需要去除 Hash 值，以及如何配置 Hash 值以满足生产环境的需求。