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,一经查实,立即删除!

相关文章

kafka分区重建

创建kafka的topic:./bin/kafka-topics.sh --create --zookeeper 192.168.70.212:2181,192.168.70.213:2181,192.168.70.214:2181 --replication-factor 3 --partitions 3 --topic test01 列举kafka的topic: ./bin/kafka-topics.sh --zookeeper 192.168.70.212:2181…

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

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

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

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

服装分销的系统架构

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

LCD 显示--lvds

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

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

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

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

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

系统估算类问题

已知 Twitter 2020 年大约有 2000 亿的推文(tweets),如果你来设计 Twitter 系统,请问发推服务的吞吐量需要多少,网络带宽要占用多大,要存储它们需要多少磁盘容量? 具体不同的编码方式&#xff0…

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

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

MySQL索引设计与性能优化策略详解

MySQL索引设计与性能优化策略详解 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 引言 MySQL作为广泛应用的关系型数据库管理系统(RDBMS&#xf…

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…

Linux Polkit 权限提升漏洞:CVE-2021-4034安全分析与修复指南

Linux Polkit 权限提升漏洞:CVE-2021-4034安全分析与修复指南 作为网络安全领域的专家,我对近期发现的影响Linux系统的Polkit权限提升漏洞(CVE-2021-4034)进行了深入分析。Polkit,即PolicyKit,是一个在Lin…

ITK-二值阈值分割

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

【JVM系列】JVM调优

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

量化交易策略:KDJ策略的买入卖出点确认

KDJ指标简介 KDJ指标,全称随机指标(Stochastic Oscillator),是一种非常常用的技术分析指标,用于判断股票价格的超买和超卖状态。KDJ指标由三条线组成:K线、D线和J线。其中,K线代表快速移动平均线,D线代表慢速移动平均线,J线是K线与D线的差值。 KDJ策略的原理 KDJ策…

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…

【Jetpack】Lifecycle之监听LifecycleObserver

关于LifecycleEventObserver Lifecycle可以添加观察者&#xff0c;从而让其它工作与周期变化保持一致 比如我们希望Dialog和Activity的生命周期一致&#xff0c;能够在Activity结束时自动关闭 可以通过如下代码来实现 与Lifecycle同步的Dialog package com.android.codeim…

GPTPDF: 利用 GPT 将 PDF 转为 Markdown

GPTPDF 是一款利用视觉模型&#xff08;GPT-4o&#xff09;将 PDF 转为 MD 文件的开源工具 它利用 PyMuPDF 将 PDF 拆分为图片&#xff0c;再利用 GPT 来判断是否能够转为纯文本&#xff0c;否则直接使用图片&#xff0c;所以能够比较好的还原排版、数学公式、表格、图片、图表…