最近维护一个Vue前端项目,发现每次编辑完代码保存之后会在 node_modules.cache\babel-loader或\node_modules.cache\eslint-loader路径下生成许多 不知名的文件,一个个删或重置很麻烦不知道怎么去掉这些文件啊,怀疑是vue.config.js中配置打包的问题,但不会配,不知道应该怎么改,有没有会webpack配置的帮忙指点指点感谢啦
这是生成的文件:
下边是 vue.config.js中的配置
module.exports = {
publicPath: process.env.NODE_ENV === "production" ? "/xx" : "/xxx",
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
devServer: {
host: '0.0.0.0',
port: port,
open: true,
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: `http://228.xx.xx.xx:xxxx/`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
},
disableHostCheck: true
},
configureWebpack: {
name: name,
resolve: {
alias: {
'@': resolve('src')
}
}
},
chainWebpack(config) {
config.plugins.delete('preload');
config.plugins.delete('prefetch');
config.entry('polyfill').add('@babel/polyfill');
config.module
.rule('svg')
.exclude.add(resolve('src/assets/icons'))
.end();
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end();
config
.when(process.env.NODE_ENV !== 'development',
config => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [{
inline: /runtime\..*\.js$/
}])
.end();
config
.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial'
},
elementUI: {
name: 'chunk-elementUI',
priority: 20,
test: /[\\/]node_modules[\\/]_?element-ui(.*)/
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'),
minChunks: 3,
priority: 5,
reuseExistingChunk: true
}
}
});
config.optimization.runtimeChunk('single')
}
)
}
};
node_modules是项目依赖文件,里边的文件最好不要动
直接在git忽略文件里忽略调这个文件夹
`.gitignore` 这个文件
写入下边的代码
node_modules
【以下回答由 GPT 生成】
根据您提供的信息,问题的根源可能是vue.config.js
中的configureWebpack
配置。可以尝试如下步骤解决该问题:
npm install --save-dev clean-webpack-plugin
vue.config.js
中引入clean-webpack-plugin
插件:const { CleanWebpackPlugin } = require('clean-webpack-plugin');
configureWebpack
中的plugins
配置中添加以下代码:plugins: [
new CleanWebpackPlugin()
]
修改后的vue.config.js
代码如下:
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
// ...
configureWebpack: {
name: name,
resolve: {
alias: {
'@': resolve('src')
}
},
plugins: [
new CleanWebpackPlugin()
]
},
// ...
};
这样做将使用clean-webpack-plugin
插件自动清除不必要的文件。重新运行编译命令后,你应该不再看到node_modules.cache\babel-loader
或node_modules.cache\eslint-loader
目录。
请注意,这只是一个解决方案的示例,具体解决方案可能因项目的特殊情况而异。如果该解决方案不起作用,请提供更多的相关信息,以便我可以进一步帮助您解决问题。