如何在Nuxt的helper.js文件中使用VueCryptojs插件？

有两种常用方法可以在helper.js中使用VueCryptojs插件，具体如下：

方法一：直接导入crypto-js核心库 #

vue-cryptojs本质是crypto-js的Vue封装，你可以跳过Vue插件注册环节，直接在helper.js里导入原生crypto-js实现加密逻辑，这种方式更独立，不依赖Vue实例的插件挂载：

修改helper.js代码：

import Vue from 'vue';
// 直接导入crypto-js核心库
import CryptoJS from 'crypto-js';

const encrypt = (str) => {
    // 示例：AES加密逻辑，可根据需求调整
    const key = CryptoJS.enc.Utf8.parse('your-secret-key');
    const iv = CryptoJS.enc.Utf8.parse('your-iv');
    return CryptoJS.AES.encrypt(str, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }).toString();
}

Vue.mixin({
    methods: {
       encrypt: encrypt 
    }
})

方法二：利用Vue原型上挂载的$cryptojs #

在cryptojs.js中执行Vue.use(VueCryptojs)后，插件会将$cryptojs挂载到Vue的原型对象上。只要确保cryptojs.js在helper.js之前被加载，就可以直接通过Vue.prototype.$cryptojs访问插件功能：

修改helper.js代码：

import Vue from 'vue';

const encrypt = (str) => {
    // 使用Vue原型上的$cryptojs
    const key = Vue.prototype.$cryptojs.enc.Utf8.parse('your-secret-key');
    const iv = Vue.prototype.$cryptojs.enc.Utf8.parse('your-iv');
    return Vue.prototype.$cryptojs.AES.encrypt(str, key, { iv: iv, mode: Vue.prototype.$cryptojs.mode.CBC, padding: Vue.prototype.$cryptojs.pad.Pkcs7 }).toString();
}

Vue.mixin({
    methods: {
       encrypt: encrypt 
    }
})

注意事项 #

如果使用方法二，必须保证cryptojs.js的加载顺序早于helper.js，否则Vue原型上还未挂载$cryptojs会触发未定义错误。比如在main.js中要按以下顺序导入：

import './plugins/cryptojs.js'
import './plugins/helper.js'

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