docker - 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,
}),
],
},
};
解决方案
推荐阅读
- couchbase - couchbase 查询的索引
- php - Laravel 关系获取用户电子邮件
- python - 我如何创建调用相互中断的函数的热键?
- java - 休息:如何处理数千个相同的请求
- node.js - Angular 源文件在浏览器中可见。如何隐藏?
- javascript - Slick Carousel - 在移动设备上幻灯片中的 5 个项目到 1 个项目
- python-3.x - 尝试获取占位符详细信息时如何访问幻灯片的形状元素?这是使用 Python PPTX 完成的
- javascript - 在 v-for 循环中访问元素的数据 (Vue.js)
- php - 为什么 Laravel 提供默认时间戳?
- django - Django Formset Validation - Formset 中的总和值