具体步骤如下

最近接到一个项目，使用vue开发，我想给客户展示效果但是又不想用户直接用ctrl+s就把我的代码拷贝走了。

接口保护（如果是客户提供的后端接口）

用自己的服务器做转发，就是前端页面访问自己服务器的接口，再由自己的服务器转发至客户的后端接口。

vue代码混淆

使用工具如 terser 或 webpack-obfuscator 对 JavaScript 代码进行混淆。这可以增加代码的复杂性，使得源代码更难阅读和理解，例如在 vue.config.js 中添加 terser 配置来混淆代码

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  configureWebpack: {
    optimization: {
      minimize: true,
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true, // 可选：移除 console 输出
            },
            mangle: true,
          },
          extractComments: false,
        })
      ]
    }
  }
};

压缩文件（vue.config.js 中添加）

module.exports = {
  productionSourceMap: false, // 禁用 source map 以防止源代码泄露
  chainWebpack: config => {
    config.optimization.minimizer('terser').tap(args => {
      args[0].terserOptions.compress.drop_console = true; // 可选：移除 console 输出
      return args;
    });
  },
  css: {
    extract: {
      filename: 'css/[name].[contenthash].css',
      chunkFilename: 'css/[name].[contenthash].css'
    }
  }
};

禁用右键菜单（下面的操作都是在App.vue文件中）

<template>
  <div>
    <!-- 你的内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    document.addEventListener('contextmenu', this.disableContextMenu);
  },
  beforeDestroy() {
    document.removeEventListener('contextmenu', this.disableContextMenu);
  },
  methods: {
    disableContextMenu(event) {
      event.preventDefault();
    }
  }
};
</script>

禁用拖放

<template>
  <div>
    <!-- 你的内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    document.addEventListener('dragstart', this.disableDrag);
  },
  beforeDestroy() {
    document.removeEventListener('dragstart', this.disableDrag);
  },
  methods: {
    disableDrag(event) {
      event.preventDefault();
    }
  }
};
</script>

监控复制行为

<template>
  <div>
    <!-- 你的内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    document.addEventListener('copy', this.handleCopy);
  },
  beforeDestroy() {
    document.removeEventListener('copy', this.handleCopy);
  },
  methods: {
    handleCopy(event) {
      event.preventDefault();
      alert('复制被禁用');
    }
  }
};
</script>

禁用ctrl+s (main.js添加)

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.mount('#app');

document.addEventListener('keydown', function(event) {
  if ((event.ctrlKey || event.metaKey) && event.key === 's') {
    event.preventDefault();
    alert('保存被禁用');
  }
});

完整的main.js

document.addEventListener('keydown', function (event) {
    if ((event.ctrlKey || event.metaKey) && event.key === 's') {
        event.preventDefault()
    }
})

完整的app.vue

<script>
export default {
  name: 'App',
  mounted() {
    document.addEventListener('contextmenu', this.disableContextMenu)
    document.addEventListener('dragstart', this.disableDrag)
    document.addEventListener('copy', this.handleCopy)
  },
  beforeDestroy() {
    document.removeEventListener('contextmenu', this.disableContextMenu)
    document.removeEventListener('dragstart', this.disableDrag)
    document.removeEventListener('copy', this.handleCopy)
  },
  methods: {
    disableContextMenu(event) {
      event.preventDefault()
    },
    disableDrag(event) {
      event.preventDefault()
    },
    handleCopy(event) {
      event.preventDefault()
    }
  }
}
</script>

完整的vue.config.js

需要安装插件 npm install terser --save-dev

const WebpackObfuscator = require('webpack-obfuscator')
module.exports = {
  productionSourceMap: false, // 禁用 source map 以防止源代码泄露
  configureWebpack: {
    plugins: [
      new WebpackObfuscator({
        rotateUnicodeArray: true,
      }, ['vendors*.js'])
    ]
  },
  chainWebpack: config => {
    config.optimization.minimizer('terser').tap(args => {
      args[0].terserOptions.compress.drop_console = true; // 可选：移除 console 输出
      return args;
    });
  },
  css: {
    extract: {
      filename: 'css/[name].[contenthash].css',
      chunkFilename: 'css/[name].[contenthash].css'
    }
  }
};