- 在项目根目录中创建一个文件
vue.config.js
我也使用了一些其他选项,但您需要的是这个。
const path = require('path');
module.exports = {
lintOnSave: true,
filenameHashing: false,
chainWebpack: config => {
config.optimization.delete('splitChunks')
}
};
这将删除创建的块,并让您仅使用单个文件CSS
也JS
.
-
filenameHashing: false
这部分将删除文件上的哈希值。
-
config.optimization.delete('splitChunks')
这将删除块。
更具体地说是根据您的要求。
使用这些配置
module.exports = {
lintOnSave: true,
filenameHashing: false,
configureWebpack: {
optimization: {
cacheGroups: {
default: false,
// Merge all the CSS into one file
styles: {
name: 'styles',
test: /\.s?css$/,
chunks: 'all',
minChunks: 1,
reuseExistingChunk: true,
enforce: true,
},
},
}
}
};
通过这种方式,你的 JS 代码将被分割成块,但 CSS 文件将被合并为一个。
如果您还想配置 JS 块,则可以使用这些设置。
module.exports = {
lintOnSave: true,
filenameHashing: false,
configureWebpack:{
optimization: {
cacheGroups: {
default: false,
// Custom common chunk
bundle: {
name: 'commons',
chunks: 'all',
minChunks: 3,
reuseExistingChunk: false,
},
// Customer vendor
vendors: {
chunks: 'initial',
name: 'vendors',
test: 'vendors',
},
// Merge all the CSS into one file
styles: {
name: 'styles',
test: /\.s?css$/,
chunks: 'all',
minChunks: 1,
reuseExistingChunk: true,
enforce: true,
},
},
}
}
};