首页 > 解决方案 > Vue cli。如何使用相同的哈希构建

问题描述

我在 vue cli 构建中遇到了哈希问题。现在到细节。我构建了我的应用程序,在 dist 文件夹中,我看到我的文件名称为 app.dsadas.js、chunk-1-dsadaas.js 等。一切看起来都不错。但是我在 docker 图像中构建我的应用程序,可能有 2 个或更多,我需要所有这些图像在文件名中具有相同的哈希值,但事实并非如此。这个 'webpack-md5-hash' 插件帮助我解决了这个问题,但它的非常旧的解决方案可以处理警告。请帮助找到 webpack 4 的解决方案。

这是我的 vue 配置文件:

const path = require('path');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
const CompressionWebpackPlugin = require('compression-webpack-plugin');

const productionGzipExtensions = ['js', 'css'];

function resolve(dir) {
  return path.resolve(__dirname, dir);
}

module.exports = {
  assetsDir: 'static',
  runtimeCompiler: true,
  lintOnSave: process.env.NODE_ENV !== 'production',
  devServer: {
    overlay: {
      warnings: true,
      errors: true,
    },
  },
  configureWebpack: {
    performance: {
      hints: false,
    },
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        vue$: 'vue/dist/vue.esm.js',
        '@': resolve('src'),
        utils: resolve('src/utils'),
        api: resolve('src/api'),
        defaultStates: resolve('src/store/modules/defaultStates'),
        router: resolve('src/router'),
        store: resolve('src/store'),
        config: resolve('src/config'),
        helpers: resolve('src/store/modules/helpers'),
        constants: resolve('src/constants'),
        mixins: resolve('src/mixins'),
      },
    },
    plugins: [
      new VuetifyLoaderPlugin(),
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp(`\\.(${productionGzipExtensions.join('|')})$`),
        threshold: 10240,
        minRatio: 0.8,
      }),
    ],
  },
};

标签: dockervue.jswebpack

解决方案


推荐阅读