在Vue-cli3中设置别名和添加打包哈希值的方法
5星
- 浏览量: 0
- 大小:None
- 文件类型：PDF
简介：
本文介绍了如何在使用Vue-cli3时配置路径别名，并展示了实现打包文件加入hash值的具体方法。
Vue CLI 3 是一个强大的工具用于快速创建 Vue.js 应用程序项目，并提供了许多自动化构建配置功能。这使得开发者可以专注于编写应用程序代码而不是繁琐的设置工作。
本段落将深入探讨如何在 Vue CLI 3 中进行 `alias` 配置和添加文件名中的哈希值（hash）以优化开发体验与性能管理。
首先，我们来看一下 `alias` 的配置方法。大型应用中通常需要引用许多模块和文件，这时路径可能会变得很长且难以维护。通过设置别名(alias)，可以简化这些常见的引用路径。在 Vue CLI 3 中，可以在项目根目录的 `vue.config.js` 文件里进行如下操作：
```javascript
const path = require(path)
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
chainWebpack(config) {
config.resolve.alias
.set(@style, resolve(public/style))
.set(@api, resolve(src/api))
.set(@tools, resolve(src/tools))
.set(@components, resolve(src/components))
}
}
```
这里我们为不同的目录设置了别名，比如 `@style` 对应的是项目中的公共样式文件夹。这样，在代码中引用这些路径时就可以直接使用简短的别名。
接下来讨论在打包过程中如何添加哈希值（hash）。这有助于管理浏览器缓存：每次构建生成的新文件都会带上新的哈希值，当文件内容改变时对应的 URL 也会更新，从而确保用户访问的是最新版本的内容。可以按照以下方式配置 Vue CLI：
```javascript
module.exports = {
chainWebpack(config) {
config.output.filename([name].[hash].js).end();
}
}
```
这里设置的 `[hash]` 是基于构建文件内容生成的一个唯一标识符（哈希值）。每当源码发生变化，这个哈希值就会更新。此外，在处理静态资源如图片、音频等时也可以使用类似的方法：
```javascript
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: url-loader,
options: {
limit: 10000,
name: utils.assetsPath(img/[name].[hash:7].[ext])
}
}
```
这里，`[hash]` 确保了当静态资源发生变更时文件名也会更新。
关于 `webpack` 中的哈希类型：`hash`, `chunkhash`, 和 `contenthash` 都有不同的用途：
- 使用全局构建过程（compilation）的唯一标识符作为哈希值，即任何内容改变都会导致整个项目重新编译。
- 基于每个模块 chunk 的内容生成唯一的标识符。只有当该 chunk 内容变化时才会更新此 hash。
- 用于从 `extract-text-webpack-plugin` 中提取的 CSS 文件，仅在文件自身发生变化时才更改哈希值。
通过合理配置这些选项，Vue CLI 3 能够确保所有构建输出均包含基于内容生成的唯一标识符（hash），从而有效地管理缓存并提升用户体验。了解和正确设置这些参数对于优化 Vue 应用程序项目的构建流程至关重要。
全部评论 (0)
