nodejs（13）：使用 ant-design-pro-vue 修改配置文件打包，去掉sourceMap，保证代码安全

最新推荐文章于 2024-07-25 16:33:55 发布

fly-iot

最新推荐文章于 2024-07-25 16:33:55 发布

阅读量8.5k

点赞数 2

分类专栏： nodejs 文章标签： nodejs

本文链接：https://blog.csdn.net/freewebsys/article/details/88703898

版权

nodejs 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

前言

本文的原文连接是: https://blog.csdn.net/freewebsys/article/details/88703898
未经博主允许不得转载。
博主地址是：http://blog.csdn.net/freewebsys

1，关于ant-design-pro-vue

ant-design-pro-vue是我喜欢的前端项目
非常不错。
项目地址：
https://github.com/sendya/ant-design-pro-vue
关于打包。build，vue 配置：
https://cli.vuejs.org/zh/config/#全局-cli-配置

2，使用

默认的打包，到 dist 文件夹下面了：

同时上面有好多的 map 文件。这个就是 sourceMap 是开发的时候调试使用的。
要是部署到生产上去，前端的源代码就直接泄露了。

预览的网站就没有关闭 sourceMap ，https://preview.pro.loacg.com/dashboard/workplace
因为是开源的网站，所以无所谓了。但是要是公司的就不安全了。
随着使用 node 开发的越来越多了。有源代码漏洞的网站也愈来愈多呢。算是“开源”了呢。

修改 vue.config.js 配置文件：


...
// vue.config.js
module.exports = {

    // vue.config.js
    // 配置参考：https://cli.vuejs.org/zh/config/#babel
  
    outputDir: 'dist',
    assetsDir: 'static',//相对静态资源路径。
    indexPath: 'index.html',
    filenameHashing: true,//默认。
    productionSourceMap: false,//发布去掉sourceMap，泄露源代码
   
    ...

去掉 sourceMap 效果
在这里插入图片描述
增加 productionSourceMap: false 和 assetsDir: ‘static’ 相对路径。
然后执行 yarn run build 就可以打包了。
设置 stati 资源目录效果：

其中 index.html 中代码也变成 static 路径

...

  <title>Ant Design Pro</title>
  <style>
    #preloadingAnimation{position:fixed;left:0;top:0;height:100%;width:100%;background:#ffffff;user-select:none;z-index: 9999;overflow: hidden}.lds-roller{display:inline-block;position:relative;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;}.lds-roller div{animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;transform-origin:32px 32px;}.lds-roller div:after{content:" ";display:block;position:absolute;width:6px;height:6px;border-radius:50%;background:#13c2c2;margin:-3px 0 0 -3px;}.lds-roller div:nth-child(1){animation-delay:-0.036s;}.lds-roller div:nth-child(1):after{top:50px;left:50px;}.lds-roller div:nth-child(2){animation-delay:-0.072s;}.lds-roller div:nth-child(2):after{top:54px;left:45px;}.lds-roller div:nth-child(3){animation-delay:-0.108s;}.lds-roller div:nth-child(3):after{top:57px;left:39px;}.lds-roller div:nth-child(4){animation-delay:-0.144s;}.lds-roller div:nth-child(4):after{top:58px;left:32px;}.lds-roller div:nth-child(5){animation-delay:-0.18s;}.lds-roller div:nth-child(5):after{top:57px;left:25px;}.lds-roller div:nth-child(6){animation-delay:-0.216s;}.lds-roller div:nth-child(6):after{top:54px;left:19px;}.lds-roller div:nth-child(7){animation-delay:-0.252s;}.lds-roller div:nth-child(7):after{top:50px;left:14px;}.lds-roller div:nth-child(8){animation-delay:-0.288s;}.lds-roller div:nth-child(8):after{top:45px;left:10px;}#preloadingAnimation .load-tips{color: #13c2c2;font-size:2rem;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:80px;text-align:center;width:400px;height:64px;}  @keyframes lds-roller{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}
  </style>
  <link href=/static/css/chunk-28469938.4ddf0c35.css rel=prefetch>
  <link href=/static/css/chunk-4fda65c2.d1dab8d6.css rel=prefetch>
  <link href=/static/css/chunk-5470d5e6.079e8a94.css rel=prefetch>
  <link href=/static/css/chunk-642255ec.29c90d80.css rel=prefetch>
  <link href=/static/css/fail.4bacf1ea.css rel=prefetch>
  <link href=/static/js/chunk-28469938.ce5ba557.js rel=prefetch>
  <link href=/static/js/chunk-4fda65c2.51199955.js rel=prefetch>
  <link href=/static/js/chunk-5470d5e6.01421568.js rel=prefetch>
  <link href=/static/js/chunk-642255ec.626fbe94.js rel=prefetch>
  <link href=/static/js/fail.bac61931.js rel=prefetch>
  <link href=/static/css/app.38e94f3e.css rel=preload as=style>
  <link href=/static/css/chunk-vendors.2a48bfb0.css rel=preload as=style>
  <link href=/static/js/app.e28452e0.js rel=preload as=script>
  <link href=/static/js/chunk-vendors.6058c1d8.js rel=preload as=script>
  <link href=/static/css/chunk-vendors.2a48bfb0.css rel=stylesheet>
  <link href=/static/css/app.38e94f3e.css rel=stylesheet>
</head>

....

研究明白了。然后把 index.html 和 static 目录拷贝到 nginx html 或者 tomcat webapp 目录即可。