Blazor项目中使用CryptoJS报错“CryptoJS is not defined”的问题咨询

原因 #

你只通过npm完成了crypto-js的安装，但没有在index.html中正确引入该库的脚本文件，浏览器无法识别全局的CryptoJS对象；另外也可能是自定义脚本在CryptoJS加载前就执行，导致找不到对象。

解决步骤 #

1. 确认crypto-js的脚本位置
   npm安装后，crypto-js的脚本文件通常位于项目根目录的node_modules/crypto-js/下，找到crypto-js.js（部分版本可能在dist子目录里）。

2. 在自定义脚本前引入crypto-js
   在index.html中，把crypto-js的脚本引用放在你的自定义<script>标签之前，确保CryptoJS对象先被加载：

   <!-- 先引入crypto-js库 -->
   <script src="node_modules/crypto-js/crypto-js.js"></script>
   
   <!-- 再编写你的自定义脚本 -->
   <script>
       ... OTHER FUNCTIONS
   
       function encryptMessage(message, key) {
           const keyOffSet = 10;
           const data = CryptoJS.enc.Utf8.parse(message);
           const keyLength = 24
           
       }
   </script>
   

3. 路径访问问题处理（可选）
   如果Blazor项目无法直接访问node_modules目录的文件，你可以将crypto-js.js复制到项目的wwwroot/lib/crypto-js/目录下，然后修改引用路径：

   <script src="lib/crypto-js/crypto-js.js"></script>
   

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