首先，没有办法可以完全防止别人查看或复制网页代码，因为HTTP和浏览器的工作原理决定了客户端代码的可访问性。但是我们仍可以采取一些措施来提高安全性和增加复制难度。

混淆和压缩代码

使用工具如UglifyJS或Terser来混淆JavaScript代码。混淆可以帮助隐藏代码的真实意图，并使得代码阅读和修改变得更加困难。

使用Web构建工具

如Webpack或Rollup，这些工具可以提供代码拆分，按需加载等功能，这样即使有人复制了代码，也很难将其还原为完整的项目。

// webpack.config.js
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
    minimize: true,
    minimizer: [new TerserPlugin(/* ... */)],
  },
  // ...
};

禁用右键菜单

可以通过JavaScript禁用右键菜单，防止用户轻易地使用“查看页面源代码”和“保存页面为...”等功能。

document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
});

禁用F12和Ctrl+Shift+I

可以通过JavaScript监听键盘事件，阻止打开开发者工具的快捷键。

document.onkeydown = function(e) {
  if (e.keyCode == 123 || (e.ctrlKey && e.shiftKey && (e.keyCode == 'I'.charCodeAt(0)))) {
    return false;
  }
};

使用CSS和JavaScript保护内容

例如，可以使用CSS让文本不可选中，或者使用JavaScript定期检查DOM的改变，以防止调试。

CSS防止文本被选中：

body {
  -webkit-user-select: none; /* Chrome, Safari, Opera */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* 非前缀版本，可以在支持的浏览器中使用 */
}

JavaScript定期检查DOM的改变：

const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    console.log('Detected changes:', mutation);
    // 可以在这里添加逻辑来处理检测到的DOM变化
  });
});
observer.observe(document.body, {
  childList: true, // 监听子元素的变化
  attributes: true, // 监听属性的变化
  subtree: true // 监听所有后代元素的变化
});

服务端API安全

确保你的API有适当的认证和授权机制，这样即使有人复制了前端代码，他们也无法获取敏感数据或执行未授权的操作。

这通常涉及到后端代码，例如在Node.js中使用JWT进行认证：

const jwt = require('jsonwebtoken');
function authenticateToken(req, res, next) {
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1];
  if (token == null) return res.sendStatus(401);
  jwt.verify(token, process.env.ACCESS_TOKEN_SECRET, (err, user) => {
    if (err) return res.sendStatus(403);
    req.user = user;
    next();
  });
}

CSP（内容安全策略）

使用CSP可以限制资源的加载和执行，比如禁止加载外部脚本，限制表单的提交等。