add vue i18n

web/i18n/index.js

@@ -0,0 +1,13 @@
+import { createI18n } from 'vue-i18n'
+
+import messages from './messages'
+
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages: messages
+})
+
+export default i18n

web/i18n/messages/cn.json

@@ -0,0 +1,11 @@
+{
+  "app_name": "Vue FastAPI Admin",
+  "views": {
+    "login": {
+      "text_login": "登录",
+      "message_input_username_password": "请输入用户名和密码",
+      "message_verifying": "正在验证...",
+      "message_login_success": "登录成功"
+    }
+  }
+}

web/i18n/messages/en.json

@@ -0,0 +1,11 @@
+{
+  "app_name": "Vue FastAPI Admin",
+  "views": {
+    "login": {
+      "text_login": "Login",
+      "message_input_username_password": "Please enter username and password",
+      "message_verifying": "Verifying...",
+      "message_login_success": "Login successful"
+    }
+  }
+}

web/i18n/messages/index.js

@@ -0,0 +1,7 @@
+import * as en from './en.json'
+import * as cn from './cn.json'
+
+export default {
+  en,
+  cn
+}

web/package.json

@@ -34,6 +34,7 @@
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-svg-icons": "^2.0.1",
     "vue": "^3.3.4",
+    "vue-i18n": "9",
     "vue-router": "^4.2.4"
   },
   "devDependencies": {

web/src/main.js

@@ -10,6 +10,7 @@ import { setupStore } from '@/store'
 import App from './App.vue'
 import { setupDirectives } from './directives'
 import { useResize } from '@/utils'
+import i18n from '~/i18n'
 
 async function setupApp() {
   const app = createApp(App)
@@ -19,6 +20,7 @@ async function setupApp() {
   await setupRouter(app)
   setupDirectives(app)
   app.use(useResize)
+  app.use(i18n)
   app.mount('#app')
 }
 

web/src/views/login/index.vue

@@ -11,7 +11,7 @@
 
       <div w-320 flex-col px-20 py-35>
         <h5 f-c-c text-24 font-normal color="#6a6a6a">
-          <icon-custom-logo mr-10 text-50 color-primary />{{ title }}
+          <icon-custom-logo mr-10 text-50 color-primary />{{ $t('app_name') }}
         </h5>
         <div mt-30>
           <n-input
@@ -44,7 +44,7 @@
             :loading="loading"
             @click="handleLogin"
           >
-            登录
+            {{ $t('views.login.text_login') }}
           </n-button>
         </div>
       </div>
@@ -57,11 +57,11 @@ import { lStorage, setToken } from '@/utils'
 import bgImg from '@/assets/images/login_bg.webp'
 import api from '@/api'
 import { addDynamicRoutes } from '@/router'
-
-const title = import.meta.env.VITE_TITLE
+import {useI18n} from 'vue-i18n'
 
 const router = useRouter()
 const { query } = useRoute()
+const {t} = useI18n({ useScope: "global" })
 
 const loginInfo = ref({
   username: '',
@@ -82,14 +82,14 @@ const loading = ref(false)
 async function handleLogin() {
   const { username, password } = loginInfo.value
   if (!username || !password) {
-    $message.warning('请输入用户名和密码')
+    $message.warning(t('views.login.message_input_username_password'))
     return
   }
   try {
     loading.value = true
-    $message.loading('正在验证...')
+    $message.loading(t('views.login.message_login_success'))
     const res = await api.login({ username, password: password.toString() })
-    $message.success('登录成功')
+    $message.success(t('views.login.message_login_success'))
     setToken(res.data.access_token)
     await addDynamicRoutes()
     if (query.redirect) {