配置使用i18n国际化语言插件使用

components/footer.vue

@@ -3,7 +3,7 @@
     <div class="container-fluid w-100 h-auto">
       <div class="row justify-content-center">
         <dl class="introduce col-6 col-md-2">
-          <dt>Contact us</dt>
+          <dt>{{ $t('footer.contactUs') }}</dt>
           <dl>
             Detailed address
           </dl>

locales/en.json

@@ -0,0 +1,5 @@
+{
+  "footer": {
+    "contactUs": "Contact us"
+  }
+}

locales/zh.json

@@ -0,0 +1,5 @@
+{
+  "footer": {
+    "contactUs": "联系我们"
+  }
+}

middleware/i18n.js

@@ -0,0 +1,29 @@
+export default function ({
+  isHMR,
+  app,
+  store,
+  route,
+  query,
+  error,
+  redirect
+}) {
+  const defaultLocale = app.i18n.fallbackLocale
+  if (isHMR) {
+    return
+  }
+  const locale = query.lang || defaultLocale
+  if (!store.state.locales.includes(locale)) {
+    return error({ message: 'This page could not be found.', statusCode: 404 })
+  }
+  store.commit('SET_LANG', locale)
+  app.i18n.locale = store.state.locale
+  
+  if (locale === defaultLocale && route.fullPath.indexOf('/' + defaultLocale) === 0) {
+    const toReplace =
+      '^/' +
+      defaultLocale +
+      (route.fullPath.indexOf('/' + defaultLocale + '/') === 0 ? '/' : '')
+    const re = new RegExp(toReplace)
+    return redirect(route.fullPath.replace(re, '/'))
+  }
+}

nuxt.config.js

@@ -1,4 +1,3 @@
-
 const env = require('./env');
 const webpack = require('webpack')
 
@@ -55,6 +54,7 @@ export default {
     '~plugins/axios',
     { src: "~plugins/router.js", ssr: true },
     { src: "~plugins/vue-awesome-swiper.js", ssr: false },
+    { src: "~plugins/i18n.js", ssr: true },
   ],
   /*
   ** Nuxt.js modules
@@ -66,6 +66,9 @@ export default {
     'nuxt-sass-resources-loader',
     'bootstrap-vue/nuxt',
   ],
+  router: {
+    middleware: 'i18n'
+  },
   /*
   ** Build configuration
   */

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "suodi",
+  "name": "Truck",
   "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -270,6 +270,11 @@
         "@babel/types": "^7.11.0"
       }
     },
+    "@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="
+    },
     "@babel/helper-validator-identifier": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz",
@@ -1014,6 +1019,63 @@
       "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
       "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw=="
     },
+    "@intlify/shared": {
+      "version": "9.14.4",
+      "resolved": "https://registry.npmmirror.com/@intlify/shared/-/shared-9.14.4.tgz",
+      "integrity": "sha512-P9zv6i1WvMc9qDBWvIgKkymjY2ptIiQ065PjDv7z7fDqH3J/HBRBN5IoiR46r/ujRcU7hCuSIZWvCAFCyuOYZA=="
+    },
+    "@intlify/vue-i18n-extensions": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/@intlify/vue-i18n-extensions/-/vue-i18n-extensions-1.0.2.tgz",
+      "integrity": "sha512-rnfA0ScyBXyp9xsSD4EAMGeOh1yv/AE7fhqdAdSOr5X8N39azz257umfRtzNT9sHXAKSSzpCVhIbMAkp5c/gjQ==",
+      "requires": {
+        "@babel/parser": "^7.9.6"
+      }
+    },
+    "@intlify/vue-i18n-loader": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/@intlify/vue-i18n-loader/-/vue-i18n-loader-1.1.0.tgz",
+      "integrity": "sha512-9LXiztMtYKTE8t/hRwwGUp+ofrwU0sxLQLzFEOZ38zvn0DonUIQmZUj1cfz5p1Lu8BllxKbCrn6HnsRJ+LYA6g==",
+      "requires": {
+        "@intlify/shared": "^9.0.0",
+        "js-yaml": "^3.13.1",
+        "json5": "^2.1.1"
+      }
+    },
+    "@jridgewell/gen-mapping": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
+      "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+      "requires": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="
+    },
+    "@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A=="
+    },
+    "@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
+    },
+    "@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "requires": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
@@ -1483,6 +1545,124 @@
         }
       }
     },
+    "@nuxtjs/i18n": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmmirror.com/@nuxtjs/i18n/-/i18n-7.3.1.tgz",
+      "integrity": "sha512-DZP6xR8zZA1ApcNjLnukH3BhMRCfi3r236epuXVuPWWOObPf5vkp+VamewnPiSU+zs0Age+PbaaIUryFv/6pDA==",
+      "requires": {
+        "@babel/parser": "^7.18.10",
+        "@babel/traverse": "^7.18.10",
+        "@intlify/vue-i18n-extensions": "^1.0.2",
+        "@intlify/vue-i18n-loader": "^1.1.0",
+        "@nuxt/utils": "2.x",
+        "cookie": "^0.5.0",
+        "devalue": "^2.0.1",
+        "is-https": "^4.0.0",
+        "js-cookie": "^3.0.1",
+        "klona": "^2.0.5",
+        "lodash.merge": "^4.6.2",
+        "ufo": "^0.8.5",
+        "vue-i18n": "^8.27.2"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.27.1",
+          "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.27.1.tgz",
+          "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.27.1",
+            "js-tokens": "^4.0.0",
+            "picocolors": "^1.1.1"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.27.5",
+          "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.27.5.tgz",
+          "integrity": "sha512-ZGhA37l0e/g2s1Cnzdix0O3aLYm66eF8aufiVteOgnwxgnRP8GoyMj7VWsgWnQbVKXyge7hqrFh2K2TQM6t1Hw==",
+          "requires": {
+            "@babel/parser": "^7.27.5",
+            "@babel/types": "^7.27.3",
+            "@jridgewell/gen-mapping": "^0.3.5",
+            "@jridgewell/trace-mapping": "^0.3.25",
+            "jsesc": "^3.0.2"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.27.1",
+          "resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
+          "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow=="
+        },
+        "@babel/parser": {
+          "version": "7.27.7",
+          "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.27.7.tgz",
+          "integrity": "sha512-qnzXzDXdr/po3bOTbTIQZ7+TxNKxpkN5IifVLXS+r7qwynkZfPyjZfE7hCXbo7IoO9TNcSyibgONsf2HauUd3Q==",
+          "requires": {
+            "@babel/types": "^7.27.7"
+          }
+        },
+        "@babel/template": {
+          "version": "7.27.2",
+          "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.27.2.tgz",
+          "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
+          "requires": {
+            "@babel/code-frame": "^7.27.1",
+            "@babel/parser": "^7.27.2",
+            "@babel/types": "^7.27.1"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.27.7",
+          "resolved": "https://registry.npmmirror.com/@babel/traverse/-/traverse-7.27.7.tgz",
+          "integrity": "sha512-X6ZlfR/O/s5EQ/SnUSLzr+6kGnkg8HXGMzpgsMsrJVcfDtH1vIp6ctCN4eZ1LS5c0+te5Cb6Y514fASjMRJ1nw==",
+          "requires": {
+            "@babel/code-frame": "^7.27.1",
+            "@babel/generator": "^7.27.5",
+            "@babel/parser": "^7.27.7",
+            "@babel/template": "^7.27.2",
+            "@babel/types": "^7.27.7",
+            "debug": "^4.3.1",
+            "globals": "^11.1.0"
+          }
+        },
+        "@babel/types": {
+          "version": "7.27.7",
+          "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.27.7.tgz",
+          "integrity": "sha512-8OLQgDScAOHXnAz2cV+RfzzNMipuLVBz2biuAJFMV9bfkNf393je3VM8CLkjQodW5+iWsSJdSgSWT6rsZoXHPw==",
+          "requires": {
+            "@babel/helper-string-parser": "^7.27.1",
+            "@babel/helper-validator-identifier": "^7.27.1"
+          }
+        },
+        "cookie": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmmirror.com/cookie/-/cookie-0.5.0.tgz",
+          "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw=="
+        },
+        "debug": {
+          "version": "4.4.1",
+          "resolved": "https://registry.npmmirror.com/debug/-/debug-4.4.1.tgz",
+          "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+          "requires": {
+            "ms": "^2.1.3"
+          }
+        },
+        "jsesc": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-3.1.0.tgz",
+          "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="
+        },
+        "klona": {
+          "version": "2.0.6",
+          "resolved": "https://registry.npmmirror.com/klona/-/klona-2.0.6.tgz",
+          "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA=="
+        },
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+        }
+      }
+    },
     "@nuxtjs/proxy": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@nuxtjs/proxy/-/proxy-2.0.1.tgz",
@@ -4122,6 +4302,11 @@
       "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-5.0.0.tgz",
       "integrity": "sha1-OHHMCmoALow+Wzz38zYmRnXwa50="
     },
+    "devalue": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/devalue/-/devalue-2.0.1.tgz",
+      "integrity": "sha512-I2TiqT5iWBEyB8GRfTDP0hiLZ0YeDJZ+upDxjBfOC2lebO5LezQMv7QvIUTzdb64jQyAKLf1AHADtGN+jw6v8Q=="
+    },
     "diffie-hellman": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@@ -6266,6 +6451,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-https": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/is-https/-/is-https-4.0.0.tgz",
+      "integrity": "sha512-FeMLiqf8E5g6SdiVJsPcNZX8k4h2fBs1wp5Bb6uaNxn58ufK1axBqQZdmAQsqh0t9BuwFObybrdVJh6MKyPlyg=="
+    },
     "is-nan": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.0.tgz",
@@ -6481,6 +6671,11 @@
       "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
       "dev": true
     },
+    "js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -6715,6 +6910,11 @@
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
     },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmmirror.com/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
+    },
     "lodash.template": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
@@ -8138,6 +8338,11 @@
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
       "dev": true
     },
+    "picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
+    },
     "picomatch": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
@@ -11053,6 +11258,11 @@
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.22.tgz",
       "integrity": "sha512-YUxzMjJ5T71w6a8WWVcMGM6YWOTX27rCoIQgLXiWaxqXSx9D7DNjiGWn1aJIRSQ5qr0xuhra77bSIh6voR/46Q=="
     },
+    "ufo": {
+      "version": "0.8.6",
+      "resolved": "https://registry.npmmirror.com/ufo/-/ufo-0.8.6.tgz",
+      "integrity": "sha512-fk6CmUgwKCfX79EzcDQQpSCMxrHstvbLswFChHS0Vump+kFkw7nJBfTZoC1j0bOGoY9I7R3n2DGek5ajbcYnOw=="
+    },
     "uglify-js": {
       "version": "3.10.4",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.10.4.tgz",
@@ -11379,6 +11589,11 @@
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog=="
     },
+    "vue-i18n": {
+      "version": "8.28.2",
+      "resolved": "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-8.28.2.tgz",
+      "integrity": "sha512-C5GZjs1tYlAqjwymaaCPDjCyGo10ajUphiwA922jKt9n7KPpqR7oM1PCwYzhB/E7+nT3wfdG3oRre5raIT1rKA=="
+    },
     "vue-loader": {
       "version": "15.9.3",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.3.tgz",

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@chenfengyuan/vue-countdown": "^1.1.5",
     "@nuxtjs/axios": "^5.12.2",
+    "@nuxtjs/i18n": "^7.3.1",
     "babel-polyfill": "^6.26.0",
     "bootstrap": "^4.1.3",
     "bootstrap-vue": "^2.0.0-rc.11",

pages/index.vue

@@ -39,7 +39,6 @@ export default {
     }
   },
   mounted() {
-    
   },
   methods: {
     goPage(item) {

plugins/i18n.js

@@ -0,0 +1,17 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+import en from '../locales/en.json';
+import zh from '../locales/zh.json';
+
+Vue.use(VueI18n);
+
+export default ({app}) => {
+    app.i18n = new VueI18n({
+        locale: 'en',
+        fallbackLocale: 'en',
+        messages: {
+            en,
+            zh
+        }
+    });
+}

plugins/router.js

@@ -1,5 +1,6 @@
 export default ({ app,$cookies,$config, store }) => {
   app.router.beforeEach((to, from, next) => {
+    app.i18n.locale = store.state.locale
     next()
   })
 }

store/index.js

@@ -1,10 +1,13 @@
 export const state = () => ({
-  info: {}
+  locales: ['en', 'zh'],
+  locale: 'en'
 })
 
 export const mutations = {
-  setInfo(state,info) {
+  SET_LANG (state, locale) {
-    state.info = info
+    if (state.locales.includes(locale)) {
+      state.locale = locale
+    }
   }
 }