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

本篇文章涉及到前端项目打包的一些说明

我打包后的项目在部署到服务器上后,访问页面时按下F12出现了这种情况:

它显示出了我的源码,这是一种很不安全的行为

该怎么办?很简单:

我们只需要下载一点点插件,再在配置文件里配置一下就行了:

  1. 下载插件:
    在终端输入命令:
shell 复制代码
npm install terser-webpack-plugin --save-dev
  1. 配置配置文件:

    代码如下:
js 复制代码
const TerserPlugin = require('terser-webpack-plugin')
module.exports = defineConfig({
  productionSourceMap: false, // 关闭source map
  configureWebpack: {
    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': ''
        }
      }
    }
  },

})

最后效果:

这样我们的前端页面源码就不会被别人知道了~

相关推荐
麦麦大数据4 小时前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
web打印社区5 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗5 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长5 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅6 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_6 小时前
Chrome开发者工具
前端·chrome
YiHanXii6 小时前
this 输出题
前端·javascript·1024程序员节
楊无好6 小时前
React中ref
前端·react.js
程琬清君6 小时前
vue3 confirm倒计时
前端·1024程序员节
麦麦大数据6 小时前
F033 vue+neo4j图书智能问答+知识图谱推荐系统 |知识图谱+neo4j+vue+flask+mysql实现代码
vue.js·flask·nlp·neo4j·智能问答·图书·1024程序员节