VUE中的打包删除文件、图片的HASH码
VUE打包删除文件、图片的HASH码
前言：vue打包的时候默认是会加hash加密的，很多时候不能这样，今天就遇到一个需求不要hash加密，很久没弄了就记录一下。
步骤
首先进入：进入项目-》build -》webpack.prod.conf.js 找到
filename: utils.assetsPath('js/[name].[chunkhash].js'),
filename: utils.assetsPath('css/[name].[contenthash].css'),修改成：
filename: utils.assetsPath('js/[name].js'),
filename: utils.assetsPath('css/[name].css'),好了，打包测试一下吧。
备注：在配置文件中还有一个chunkFilename，chunkFilename 没有找到官方的具体说明，大概就是在生成一些临时文件时，会生成这种chunkFile，这些我们平时用不上，所以建议原生态比较好。
去掉map文件和图片及其他静态hash
（1）去掉.map文件
进入项目目录-》config -》 index.js 中设置：
productionSourceMap: false
（2）去掉临时文件生成的hash加密：
注销：
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')改为
chunkFilename: utils.assetsPath('js/[id].js')（3）去掉图片及其他hash：
进入build -》 webpack.base.conf.js
修改：
name: utils.assetsPath('img/[name].[hash:7].[ext]')为
name: utils.assetsPath('img/[name].[ext]')其他参考img方式去除就行，好了现在就可以去掉所有hash了。
VUE打包后遇到的坑
今天使用vue打包（npm run build）遇到了几个坑，在这里分享给大家
打包之后打开dist的页面显示空白
这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况
1、记得改一下config下面的index.js中bulid模块导出的路径。因为打包后的index.html里边的内容都是通过script标签引入的，默认显示的路径不对，打开肯定是空白的。
build: {
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
devtool: '#source-map',
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}这里需要将 assetsPublicPath: '/'改为assetsPublicPath: './',
2.src里边router/index.js路由配置里边默认模式是mode:'hash'（页面会在路由上加#），有时候改成了history（纯净路由）模式的话，打开也会是一片空白。所以改为hash或者直接把模式配置删除，让它默认的就行 。
export default new Router({
//mode: 'history',
mode:'hash',\\或者直接不写
routes: [{}]
)}3.也有可能是因为背景图片路径没有配置需要在build/utils.js添加配置
publicPath: '../../'
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath:'../../',
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}打包后找不到响应路径
这都是比较常见的几种解决方式，如果将静态资源的图片路径作为绑定数据以js引入，图片放入了static里面用来引入这个页面又该怎样处理呢,如果以绝对路径访问vue打包是不会处理这一类的，所以打包后它图片访问的路径不会更改，而打包后dist文件里就只有index.html和webpack不会处理的static文件夹（vue static/下的文件都不会被Webpack处理：它们使用相同的文件名，直接拷贝到最终的路径）
解决方式有两种：
1.如果要上线的话，需要将你的主域名加在static之前然后他会逐级去访问打包后的文件。
return {
isShow:true,
imgData:'',
myUpPic:'/yourDN/static/img/logo.png'
}2.由于vue将组件访问静态资源的路径配置好了，你可以直接/static来找到static下的文件，但是这里的问题就是你访问的时候它是逐级访问这些文件的，所以打包后他还是会找不到静态资源的文件，在这里你就需要将/static改成./static，这样的话他就会在打包后的文件夹下直接访问其之下的静态资源文件夹。
return {
isShow:true,
imgData:'',
//myUpPic:'/static/img/logo.png'
myUpPic:'./static/img/logo.png'
}以上就是个人处理vue打包bug的一些小经验，希望这些能够对大家有所帮助。也希望大家多多支持脚本之家。
相关文章
Vue中使用event的坑及解决event is not defined
这篇文章主要介绍了Vue中使用event的坑及解决event is not defined,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue项目打包压缩的实现(让页面更快响应),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要为大家详细介绍了如何使用Vue实现超酷文字上下滚动动画,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下2024-03-03
虚拟dom是当前前端最流行的两个框架（vue和react）都用到的一种技术,都说他能帮助vue和react提升渲染性能,提升用户体验,下面这篇文章主要给大家介绍了关于Vue3组件更新中的DOM diff算法的相关资料,需要的朋友可以参考下2022-04-04
深入浅析Vue.js中 computed和methods不同机制
这篇文章给大家介绍了Vue.js中 computed和methods不同机制，在vue.js中，methods和computed两种方式来动态当作方法使用，文中还给大家提到了computed和methods的区别，感兴趣的朋友一起看看吧2018-03-03
这篇文章主要介绍了VUE v-model表单数据双向绑定,结合完整实例形式分析了vue.js实现表单数据双向绑定相关操作技巧,需要的朋友可以参考下2019-01-01
本篇文章主要介绍了详解vuex 中的 state 在组件中如何监听，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要介绍了Vue中导入excel文件的两种方式,大概有两种导入文件的方法：form表单和el-upload，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
本文主要给大家讲解一下子弹击中物体、物体销毁、敌方坦克构建生成、运动算法、爆炸效果、以及障碍物的生成，感兴趣的小伙伴可以了解一下2022-03-03
这篇文章主要为大家介绍了TDesign在vitest的实践示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
最新评论