vue打包删除文件,图片的HASH码

时间:2022-09-29 清风细雨_林木木人气:0

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的一些小经验，希望这些能够对大家有所帮助。也希望大家多多支持。

加载全部内容