使用 TypeScript 和 SSR 在 Nuxt.js 中进行 Base64 编码/解码

Question

是否有一种简单的方法可以在 Nuxt.js 中将字符串与 Base64 进行编码/解码，并支持服务器端渲染，最好是 TypeScript？

Answer 1

没有办法内置，也没有找到任何插件，所以我自己创建了一个小插件，可以简单地将其放入

/plugins

目录中。

import { Plugin } from '@nuxt/types'

function encodeBase64 (value: string): string {
  if (process.client) {
    return window.btoa(unescape(encodeURIComponent(value)))
  } else {
    return Buffer.from(value, 'ascii').toString('base64')
  }
}

function decodeBase64 (value: string): string {
  if (process.client) {
    return decodeURIComponent(escape(window.atob(value)))
  } else {
    return Buffer.from(value, 'base64').toString('ascii')
  }
}

declare module 'vue/types/vue' {
  interface Vue {
    $encodeBase64: (value: string) => string,
    $decodeBase64: (value: string) => string
  }
}

declare module '@nuxt/types' {
  // nuxtContext.app.$lines inside asyncData, fetch, plugins, middleware, nuxtServerInit
  interface NuxtAppOptions {
    $encodeBase64: (value: string) => string,
    $decodeBase64: (value: string) => string
  }
  // nuxtContext.$lines
  interface Context {
    $encodeBase64: (value: string) => string,
    $decodeBase64: (value: string) => string
  }
}

declare module 'vuex/types/index' {
  // this.$lines inside Vuex stores
  // eslint-disable-next-line
  interface Store<S> {
    $encodeBase64: (value: string) => string,
    $decodeBase64: (value: string) => string
  }
}

const base64Plugin: Plugin = (_context, inject) => {
  inject('encodeBase64', encodeBase64)
  inject('decodeBase64', decodeBase64)
}

export default base64Plugin

不要忘记将其加载到您的

nuxt.config.ts

中：

  plugins: [
    { src: '~/plugins/base64.ts' },
  ],

现在在客户端和服务器端的 Vue.js 组件中使用

$encodeBase64()

和

$decodeBase64()

。

Answer 2

支持 Nuxt 3

创建插件 在

base64.ts

 中创建文件 

~/plugins

function encodeBase64(value: string): string {
    if (process.client) {
        return window.btoa(unescape(encodeURIComponent(value)))
    } else {
        return Buffer.from(value, 'ascii').toString('base64')
    }
}

function decodeBase64(value: string): string {
    if (process.client) {
        return decodeURIComponent(escape(window.atob(value)))
    } else {
        return Buffer.from(value, 'base64').toString('ascii')
    }
}

export default defineNuxtPlugin(() => {
    return {
        provide: {
            encodeBase64,
            decodeBase64
        }
    }
})

注册插件 该插件应该会自动加载，但如果没有，请在您的

nuxt.config.ts

文件中注册该插件

    plugins: [
        { src: '~/plugins/base64.ts' },
    ],

用法

    const { $encodeBase64 } = useNuxtApp()
    const encodedString = $encodeBase64(inputString)