nuxt3+Element-plus+i18n实战使用

下面是使用nuxt3 + vue-i18n国际化 + Element-plus 用于实际开发中的经验分享

Element-plus 组件的使用:

这里使用的是官方例子;nuxt3官网; 饿了么官网;

底层是按需引入的,不需要再引入组件;

如果需要使用暗模式需要在nuxt.config.ts加入'element-plus/theme-chalk/dark/css-vars.css'; 在html 上添加一个名为 dark 类即可;

更换饿了么的底层语言;官网例子;官网中有多个语言可选择引入;

<script setup lang="ts">
import en from 'element-plus/es/locale/lang/en'
import zhTw from 'element-plus/es/locale/lang/zh-tw'
import { onMounted } from 'vue'

const { locale } = useI18n()
const elLocale = ref(zhTw)

onMounted(async () => {
  getElLocale()
})

// 饿了么的国际化
const getElLocale = async () => {
  if (locale.value == 'zh-HK') {
    elLocale.value = zhTw
  } else if (locale.value == 'en') {
    elLocale.value = en
  }
}
</script>

<template>
  <div>
    <el-config-provider :locale="elLocale">
      <NuxtPage />
    </el-config-provider>
  </div>
</template>

i18n的使用

官网教程; 还需要npm i vue-i18n;

在/plugins/i18n.ts安装

import { createI18n } from 'vue-i18n'
import en from '../i18n/en'
import zh from '../i18n/zh-CN'
import hk from '../i18n/zh-HK'

export const i18n = createI18n({
  legacy: false,
  fallbackLocale: localStorage.getItem('language') || 'zh-HK', // 区配不到的语言就用zh-HK
  messages: {
    zh: zh,
    'zh-HK': hk,
    en: en,
  },
})

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(i18n)
})

在vue中使用

<h2 class="theme">{{ t("home.title") }}</h2> `

<script setup lang="ts">
import { useI18n } from "vue-i18n"; 
const { t，locale } = useI18n();
const title = ref<string>(t("home.title"));

//改变语言 //就可以全局改变语言了；
locale.value = 'zhTW'
</script>

在js中的使用

import { i18n } from '~/plugins/i18n'

i18n.global.t('xxx.xxxx') // 使用
i18n.global.locale.value // 当前语言code

路由拦截器 - Middleware

官网使用方法;

在middleware/my-middleware.global.ts

import { userAuth } from '~/store/auth'

export default defineNuxtRouteMiddleware((to, from) => {
  const auth = userAuth()

  // 判断是否有token  有token并且访问的是登录页 跳转到首页
  if (auth.Token && to.path.indexOf('/auth') != -1) {
    return navigateTo('/layouts/home')
  }

  // 无token
  if (!auth.Token && to.path.indexOf('/layouts') != -1) {
    return navigateTo('/auth/signin')
  }
})

进行HTTP请求 - $fetch

官网使用;

下面是我对$fetch的封装使用

import { v4 as uuidv4 } from 'uuid'
import { userAuth } from '~/store/auth'
import Message from '~/utils/Message'

interface RequestConfig {
  baseURL?: string
  headers?: any
  initialCache?: boolean
  lazy?: boolean
  key?: string
  method?: 'GET' | 'POST'
  responseType?: string
}

//请求体封装
function useGetFetchOptions(options: RequestConfig = {}) {
  const metaEnv = import.meta.env
  options.baseURL = metaEnv.VITE_API_BASE ?? metaEnv.VITE_API_BASE // 请求url
  options.headers = options.headers ?? {}
  options.initialCache = options.initialCache ?? false
  options.lazy = options.lazy ?? false
  const auth = userAuth()

  options.headers['X-Request-Code'] = uuidv4()
  // 判断是否有token
  if (auth.Token) {
    options.headers.Authorization = `Token ${auth.Token}`
  }
  return options
}

//http拦截封装
export async function useHttp(url: string, options: RequestConfig = {}, isIntercept?: boolean) {
  let newOptions: any = useGetFetchOptions(options)
  return await $fetch(url, newOptions)
    .then((res: any) => {
      // 不需要拦截
      if (isIntercept) {
        return res
      }

      if (res && res.success == false) {
        if (res.code.indexOf('xxx') != -1) {
          Message('xxx', 'error')
          return
        }

        throw res.message
      }

      // 文件格式
      if (res instanceof Blob) {
        return res
      }

      return res.data
    })
    .catch((err) => {
      Message(err, 'error')
      throw err
    })
}

/**
 *  @param {bool}  isIntercept  是不走拦截器  防止有的请求需要自定义拦截器
 *  @description :   get请求
 */
export function useHttpGet(url: string, options: RequestConfig = {}, isIntercept = false) {
  options.method = 'GET'
  return useHttp(url, options, isIntercept)
}

// 上传请求
export function useHttpFile(url: string, data: any = {}) {
  const options: any = {
    body: data,
    method: 'post',
    headers: { 'Content-Type': 'multipart/form-data;' },
  }
  return useHttp(url, options)
}

/**
 *  @param {bool}  isIntercept  是不走拦截器  防止有的请求需要自定义拦截器
 *  @description :   post请求
 */
export function useHttpPost(url: string, data: any = {}, isIntercept = false) {
  const options: any = {
    body: data,
    method: 'post',
  }
  return useHttp(url, options, isIntercept)
}

使用

import { useHttpPost } from '~/utils/requset'
const res = await useHttpPost('xxx', { SN: xxx})

设置本地代理

在.env.development文件加入

 VITE_API_BASE =/api

在nuxt.config.ts加入

  nitro: {
    devProxy: {
      '/api': {
        target: 'xxx',
        changeOrigin: true,
        autoRewrite: true,
      },
    },
  },

在nuxt需要使用外部链接的js和本地的js

  app: {
    head: {
      script: [
        {
          src: 'https://cdnjs.cloudflare.com/ajax/libs/jsencrypt/3.3.2/jsencrypt.min.js', // 外部的js
        },
        {
          src: '/assets/super_ckeditor.js', // 本地的js
        },
      ],
    },
  },