在vue-cli项目中使用Webpack打包后，部署到服务器上发现可以在后台看到源码；存在安全隐患；
解决方法：
首先在vue.config.js文件加入下列代码
module.exports={
productionSourceMap:false,// 生产环境是否生成 sourceMap 文件-----有可能不起作用
}
方法1
在vue.config.js文件中做一下配置
module.exports={
productionSourceMap:false,// 生产环境是否生成 sourceMap 文件----有可能不起作用
configureWebpack(config) {
// 判断当前环境是否位生产环境
config.devtool=config.mode==="production"?false:"source-map";
},
}
方法2
安装插件
npm install --save uglifyjs-webpack-plugin
或者
yarn add --save uglifyjs-webpack-plugin
在vue.config.js 中引入
module.exports={
productionSourceMap:false,// 生产环境是否生成 sourceMap 文件----有可能不起作用
configureWebpack: (config) => {
// 引入uglifyjs-webpack-plugin
let UglifyPlugin = require('uglifyjs-webpack-plugin');
if (process.env.NODE_ENV == 'development') {
// 为开发环境修改配置
config.mode = 'development'
} else {
// 为生产环境修改配置
config.mode = 'production'
let optimization = {
minimizer: [new UglifyPlugin({
uglifyOptions: {
warnings: false,
compress: {
drop_console: false,
drop_debugger: false,
pure_funcs: ['console.log']
}
}
})]
}
Object.assign(config, {
optimization
})
}
}
}
最后build打包就可以了
在生产环境的F12 后台上就看不到webpack:// 了，直接被隐藏了
