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

本篇文章涉及到前端项目打包的一些说明
我打包后的项目在部署到服务器上后,访问页面时按下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': ''}}}},})

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/38402.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

鸿蒙开发Ability Kit(程序框架服务):【声明权限】

声明权限 应用在申请权限时,需要在项目的配置文件中,逐个声明需要的权限,否则应用将无法获取授权。 在配置文件中声明权限 应用需要在module.json5配置文件的[requestPermissions]标签中声明权限。 属性说明取值范围name必须,…

Python中爬虫编程的常见问题及解决方案

Python中爬虫编程的常见问题及解决方案 引言: 随着互联网的发展,网络数据的重要性日益突出。爬虫编程成为大数据分析、网络安全等领域中必备的技能。然而,爬虫编程不仅需要良好的编程基础,还需要面对着各种常见的问题。本文将介绍…

服装分销的系统架构

背景 服装的分销规则:组织结构由总公司代理商专卖店构成。总公司全权负责销售业务,并决定给代理商的份额;代理商再给货到专卖店,整个组织机构呈现树状结构;上级机构对下级机构拥有控制权,主要控制其销售的服…

LCD 显示--lvds

作者简介: 一个平凡而乐于分享的小比特,中南民族大学通信工程专业研究生在读,研究方向无线联邦学习 擅长领域:驱动开发,嵌入式软件开发,BSP开发 作者主页:一个平凡而乐于分享的小比特的个人主页…

鸿蒙生态应用开发白皮书V3.0

来源:华为: 近期历史回顾:

鸿蒙:this传递参数到子组件中无法实现

this指代当前组件的某个变量,当把这个变量当作参数传递给子组件时,子组件中没有这个变量,属于使用不了这个变量 解决方法:在变量后面加.bind(this)将当前组件的变量一起绑定过去

【6.26更新】Win10 22H2 19045.4598镜像:免费下载!

当前微软已经发布了六月最新的KB5039299更新补丁,用户完成升级后,系统版本号将更新至19045.4598。此次更新解决了任务栏上应用跳转列表失败、可能导致系统无法从休眠状态恢复等多个问题,推荐大家升级。如果您不知道去哪里才能下载到该版本&am…

JavaScript原型对象和对象原型、原型继承、原型链

目录 1. 原型对象和对象原型2. 原型继承3. 原型链 1. 原型对象和对象原型 作用: 以前通过构造函数实例化的对象,每个实例化的对象的属性和方法都是独立的,会造成内存浪费。通过prototype对象原型能实现不同实例化对象共享公用的属性和方法,减…

STM32之四:TIM定时器(1-基本定时器)

目录 1. STM32有哪些定时器 2. 基本定时器 2.1 基本定时器主要功能 2.2 基本定时器的框图 2.2.1 时钟输入 2.2.2 至DAC 2.2.3 至时基单元(重点) 2.2.4 影子寄存器 2.2.5 基本定时器寄存器说明 2.2.5.1 控制寄存器1(TIMx_CR1&#x…

ITK-二值阈值分割

作者:翟天保Steven 版权声明:著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处 什么是二值阈值分割? 二值阈值分割是一种常见的图像处理技术,用于将图像的像素值分成两个类别&#xff1…

【JVM系列】JVM调优

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

AT32F425C8T7 开发笔记

目录 0x00 AT32F425C8T7 引脚矩阵映射关系0x01 AT32_Work_Bench 图形化配置指南0x02 AT32串口打印函数0x03 AT32 串口中断函数0x04 AT32 延时函数 0x00 AT32F425C8T7 引脚矩阵映射关系 详情可见AT32手册 AT32的矩阵映射其实也就是开启端口的复用功能,但是它的功能…

HTML-缓动函数-贝萨尔曲线

缓动函数速查表 (easings.net)-cubic-bezier(.06,.44,.94,.7) ✿ cubic-bezier.com 展示了如何使用easeOutSine函数来实现一个元素的平滑移动动画。这个demo创建了一个按钮&#xff0c;当点击它时&#xff0c;会使页面上的一个元素向右平滑移动。 <!DOCTYPE html> <ht…

计算机组成原理——寄存器

文章目录 1. 寄存器 2. 带寄存器的加法器 3. 时钟信号与计算速度 1. 寄存器 上一篇D触发器可以在时钟上沿存储1位数据。如果想存储多个位&#xff08;bit&#xff09;的数据&#xff0c;就需要用多个D触发器并联实现&#xff0c;这种电路称之为寄存器。 寄存器是计算机中央…

深入模拟版图工程师基础学习:CMOS工艺解析

作为模拟版图工程师&#xff0c;了解CMOS&#xff08;互补金属氧化物半导体&#xff09;工艺是非常重要的&#xff0c;以下是我们需要掌握的基本内容&#xff1a; 1.基础理论&#xff1a;理解CMOS工艺的基本原理和结构&#xff0c;包括NMOS和PMOS晶体管的构造及其工作原理。&a…

适配手机《植物大战僵尸杂交版》最新整合包,附Android、iOS、Windows保姆级教程和工具合集!

最近&#xff0c;新版的《植物大战僵尸杂交版》火爆全网啊&#xff01;许多小伙伴不知道手机和电脑怎样安装设置才能畅玩《杂交版》&#xff0c;所以今天阿星特意为大家准备了一份安装工具集。 里面有安卓、iOS及电脑端的安装包&#xff0c;包含安装视频教程、修改器、防闪退、…

力扣931. 下降路径最小和

Problem: 931. 下降路径最小和 文章目录 题目描述思路复杂度Code 题目描述 思路 1.定义状态&#xff1a;我们定义dp[i][j]为从矩阵的第一行到达位置(i, j)的最小下降路径和。 2.初始化状态&#xff1a;对于矩阵的第一行&#xff0c;即i 0时&#xff0c;dp[0][j]就是矩阵的第一…

密码学:对称加密算法、非对称加密算法、哈希算法

「作者简介」&#xff1a;冬奥会网络安全中国代表队&#xff0c;CSDN Top100&#xff0c;就职奇安信多年&#xff0c;以实战工作为基础著作 《网络安全自学教程》&#xff0c;适合基础薄弱的同学系统化的学习网络安全&#xff0c;用最短的时间掌握最核心的技术。 这一章节我们需…

重生之我要学后端0--HTTP协议和RESTful APIs

http和RESTful APIs HTTP协议RESTful APIs设计RESTful API设计实例 HTTP协议 HTTP&#xff08;超文本传输协议&#xff09;是用于分布式、协作式和超媒体信息系统的应用层协议。它是网页数据通讯的基础。工作原理简述如下&#xff1a; 客户端请求&#xff08;Request&#xf…

【期末速成】计算机操作系统 EP07 | 学习笔记(基于五道口一只鸭)

文章目录 一、前言&#x1f680;&#x1f680;&#x1f680;二、正文&#xff1a;☀️☀️☀️2.1 考点十八&#xff1a;管程的概念与特征 一、前言&#x1f680;&#x1f680;&#x1f680; ☀️ 回报不在行动之后&#xff0c;回报在行动之中。 本文简介&#xff1a;本人是大二…