diff --git a/components/footer.vue b/components/footer.vue index 65206ff..4a33609 100644 --- a/components/footer.vue +++ b/components/footer.vue @@ -3,7 +3,7 @@
-
Contact us
+
{{ $t('footer.contactUs') }}
Detailed address
diff --git a/locales/en.json b/locales/en.json new file mode 100644 index 0000000..243a473 --- /dev/null +++ b/locales/en.json @@ -0,0 +1,5 @@ +{ + "footer": { + "contactUs": "Contact us" + } +} \ No newline at end of file diff --git a/locales/zh.json b/locales/zh.json new file mode 100644 index 0000000..41ca407 --- /dev/null +++ b/locales/zh.json @@ -0,0 +1,5 @@ +{ + "footer": { + "contactUs": "联系我们" + } +} \ No newline at end of file diff --git a/middleware/i18n.js b/middleware/i18n.js new file mode 100644 index 0000000..4a86ec3 --- /dev/null +++ b/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, '/')) + } +} \ No newline at end of file diff --git a/nuxt.config.js b/nuxt.config.js index fa596ae..e6ba143 100644 --- a/nuxt.config.js +++ b/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 */ diff --git a/package-lock.json b/package-lock.json index 114cfbf..a54bfe5 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index c60a82c..17dd6c0 100644 --- a/package.json +++ b/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", diff --git a/pages/index.vue b/pages/index.vue index 13f8bf9..f901723 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -39,7 +39,6 @@ export default { } }, mounted() { - }, methods: { goPage(item) { diff --git a/plugins/i18n.js b/plugins/i18n.js new file mode 100644 index 0000000..b4f705c --- /dev/null +++ b/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 + } + }); +} \ No newline at end of file diff --git a/plugins/router.js b/plugins/router.js index d064320..13ccc29 100644 --- a/plugins/router.js +++ b/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() }) } diff --git a/store/index.js b/store/index.js index 4a0b997..9d6ed8d 100644 --- a/store/index.js +++ b/store/index.js @@ -1,10 +1,13 @@ export const state = () => ({ - info: {} + locales: ['en', 'zh'], + locale: 'en' }) export const mutations = { - setInfo(state,info) { - state.info = info + SET_LANG (state, locale) { + if (state.locales.includes(locale)) { + state.locale = locale + } } }