不使用vue-cli或构建工具时如何对VueJS代码进行混淆压缩？

方案1：独立JS文件轻量混淆（推荐） #

不需要搭建完整的Vue构建流程，仅需借助terser工具处理抽离的Vue代码即可：

• 第一步：将HTML模板中内嵌的Vue代码整体抽离为独立的.js文件，例如static/js/app.js
• 第二步：安装Node.js后全局安装terser：npm install terser -g
• 第三步：执行混淆压缩命令：

  terser static/js/app.js -c -m --toplevel -o static/js/app.min.js
  

  参数说明：-c开启无用代码删除和格式压缩，-m开启变量/方法名混淆替换，--toplevel会对顶级作用域的命名（包括Vue实例中的data、methods、computed属性名）进行混淆，避免原始业务命名直接暴露
• 第四步：将Flask模板中原引用app.js的地址替换为app.min.js即可

方案2：内嵌脚本动态压缩（适合少量Vue代码场景） #

如果不想抽离独立JS文件，可以直接用Python生态的JS压缩库在模板渲染时动态处理：

• 第一步：安装jsmin依赖：pip install jsmin
• 第二步：在Flask视图函数中处理Vue代码后传入模板，示例：

  from jsmin import jsmin
  from flask import render_template
  
  @app.route('/')
  def index():
      # 你的原始Vue代码
      raw_vue_script = """
      new Vue({
        el: '#app',
        data: {
          goodsList: [],
          currentPage: 1
        },
        methods: {
          loadGoods: function() {
            // 业务逻辑
          }
        }
      })
      """
      # 压缩混淆处理
      compressed_script = jsmin(raw_vue_script)
      return render_template('index.html', vue_script=compressed_script)
  

• 第三步：在HTML模板中插入处理后的脚本：<script>{{ vue_script|safe }}</script>

方案3：批量自动化处理（适合多页面多Vue代码场景） #

可以编写简单的部署脚本，在项目上线前自动批量扫描项目中所有的Vue JS文件，用terser批量生成混淆后的压缩版本，生产环境直接引用压缩文件，开发环境仍使用原生文件调试，不需要修改现有业务代码结构。

注意：前端代码混淆仅能提升他人反向理解代码逻辑的成本，无法完全阻止代码被查看，核心敏感逻辑建议放在后端接口实现，不要写入前端代码。

内容的提问来源于stack exchange，提问作者alexdelta1