当前位置: 首页> 游戏> 手游 > springboot+vue 开发记录(八) 前端项目打包

springboot+vue 开发记录(八) 前端项目打包

时间:2025/7/9 7:30:36来源:https://blog.csdn.net/qq_62791684/article/details/140072882 浏览次数:0次

本篇文章涉及到前端项目打包的一些说明
我打包后的项目在部署到服务器上后,访问页面时按下F12出现了这种情况:
在这里插入图片描述
它显示出了我的源码,这是一种很不安全的行为
该怎么办?很简单:
我们只需要下载一点点插件,再在配置文件里配置一下就行了:

  1. 下载插件:
    在终端输入命令:
npm install terser-webpack-plugin --save-dev
  1. 配置配置文件:
    在这里插入图片描述
    代码如下:
const TerserPlugin = require('terser-webpack-plugin')
module.exports = defineConfig({productionSourceMap: false, // 关闭source mapconfigureWebpack: {optimization: {minimize: true, // 开启压缩minimizer: [new TerserPlugin({terserOptions: {compress: {drop_console: true, // 去掉console},mangle: true, // 开启变量名混淆},}),],},},transpileDependencies: true,lintOnSave: false,//以下为解决跨域问题devServer: {proxy: {'/api': {target: '你自己的后端地址', // 后端API地址changeOrigin: true,pathRewrite: {'^/api': ''}}}},})

最后效果:
在这里插入图片描述
这样我们的前端页面源码就不会被别人知道了~

关键字:springboot+vue 开发记录(八) 前端项目打包

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: