[+] i18n

src/App.vue

@@ -1,9 +1,9 @@
 <template>
     <div id="nav" class="fbox-v">
-        <router-link class="router-link" to="/"><span>Home</span></router-link>
-        <router-link class="router-link" to="/about"><span>About</span></router-link>
-        <router-link class="router-link" to="/blog"><span>Blog</span></router-link>
-        <router-link class="router-link" to="/projects"><span>Projects</span></router-link>
+        <router-link class="router-link" to="/"><span>{{ $t('nav.home') }}</span></router-link>
+        <router-link class="router-link" to="/about"><span>{{ $t('nav.about') }}</span></router-link>
+        <router-link class="router-link" to="/blog"><span>{{ $t('nav.blog') }}</span></router-link>
+        <router-link class="router-link" to="/projects"><span>{{ $t('nav.projects') }}</span></router-link>
 
         <div id="nav-bookmark" ref="bookmark" :style="bookmarkCss"></div>
     </div>

src/messages.ts

@@ -2,13 +2,27 @@ import {createI18n} from "vue-i18n";
 
 export const messages = {
     en: {
-        
+        nav: {
+            home: 'Home',
+            about: 'About',
+            blog: 'Blog',
+            projects: 'Projects',
+        }
     },
     zh: {
-
+        // nav: {
+        //     home: '温馨家',
+        //     about: '关于我',
+        //     blog: '部落格',
+        //     projects: '我做的',
+        // }
     }
 }
 
 export const i18n = createI18n({
-    messages
+    messages,
+    locale: navigator.language.split('-')[0],
+    fallbackLocale: 'en'
 })
+
+console.log(navigator.language)