vue i 18 nマルチ言語構成の使用
vue i 18 nマルチ言語構成の使用ディレクトリ構造 index.js en.js zh.js vue main.jsに を導入
ディレクトリ構造 lang index.js en.js zh.js
index.js
en.js
zh.js
vue main.jsに導入
ディレクトリ構造
vue-i18n
cnpm install --save vue-i18n
index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import enLocale from './en'
import zhLocale from './zh'
import esLocale from './es'
Vue.use(VueI18n);
const messages = {
en: {
...enLocale
},
zh: {
...zhLocale
},
es: {
...esLocale
}
};
//
export function getLanguage() {
const chooseLanguage = Cookies.get('language');
if (chooseLanguage) return chooseLanguage;
// if has not choose language
const language = (navigator.language || navigator.browserLanguage).toLowerCase();
const locales = Object.keys(messages);
for (const locale of locales) {
if (language.indexOf(locale) > -1) {
return locale
}
}
return 'en'
}
const i18n = new VueI18n({
// set locale
// options: en | zh | es
locale: getLanguage(),
// set locale messages
messages
});
export default i18n
en.js
export default {
route: {
dashboard: 'Dashboard',
documentation: 'Documentation',
personal:'personal center',
guide: 'Guide',
permission: 'Permission',
pagePermission: 'Page Permission',
rolePermission: 'Role Permission',
directivePermission: 'Directive Permission',
icons: 'Icons',
components: 'Components',
tinymce: 'Tinymce',
markdown: 'Markdown',
jsonEditor: 'JSON Editor',
dndList: 'Dnd List',
splitPane: 'SplitPane',
avatarUpload: 'Avatar Upload',
dropzone: 'Dropzone',
sticky: 'Sticky',
countTo: 'Count To',
componentMixin: 'Mixin',
backToTop: 'Back To Top',
dragDialog: 'Drag Dialog',
dragSelect: 'Drag Select',
dragKanban: 'Drag Kanban',
charts: 'Charts',
keyboardChart: 'Keyboard Chart',
lineChart: 'Line Chart',
mixChart: 'Mix Chart',
example: 'Example',
nested: 'Nested Routes',
menu1: 'Menu 1',
'menu1-1': 'Menu 1-1',
'menu1-2': 'Menu 1-2',
'menu1-2-1': 'Menu 1-2-1',
'menu1-2-2': 'Menu 1-2-2',
'menu1-3': 'Menu 1-3',
menu2: 'Menu 2',
Table: 'Table',
dynamicTable: 'Dynamic Table',
dragTable: 'Drag Table',
inlineEditTable: 'Inline Edit',
complexTable: 'Complex Table',
tab: 'Tab',
form: 'Form',
createArticle: 'Create Article',
editArticle: 'Edit Article',
articleList: 'Article List',
errorPages: 'Error Pages',
page401: '401',
page404: '404',
errorLog: 'Error Log',
excel: 'Excel',
exportExcel: 'Export Excel',
selectExcel: 'Export Selected',
mergeHeader: 'Merge Header',
uploadExcel: 'Upload Excel',
zip: 'Zip',
pdf: 'PDF',
exportZip: 'Export Zip',
theme: 'Theme',
clipboardDemo: 'Clipboard',
i18n: 'I18n',
externalLink: 'External Link',
profile: 'Profile'
},
navbar: {
dashboard: 'Dashboard',
github: 'Github',
logOut: 'Log Out',
profile: 'Profile',
theme: 'Theme',
size: 'Global Size'
},
login: {
title: 'Login Form',
logIn: 'Login',
username: 'Username',
password: 'Password',
any: 'any',
thirdparty: 'Or connect with',
thirdpartyTips: 'Can not be simulated on local, so please combine you own business simulation! ! !'
},
documentation: {
documentation: 'Documentation',
github: 'Github Repository'
},
permission: {
addRole: 'New Role',
editPermission: 'Edit',
roles: 'Your roles',
switchRoles: 'Switch roles',
tips: 'In some cases, using v-permission will have no effect. For example: Element-UI el-tab or el-table-column and other scenes that dynamically render dom. You can only do this with v-if.',
delete: 'Delete',
confirm: 'Confirm',
cancel: 'Cancel'
},
guide: {
description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
button: 'Show Guide'
},
components: {
documentation: 'Documentation',
tinymceTips: 'Rich text is a core feature of the management backend, but at the same time it is a place with lots of pits. In the process of selecting rich texts, I also took a lot of detours. The common rich texts on the market have been basically used, and I finally chose Tinymce. See the more detailed rich text comparison and introduction.',
dropzoneTips: 'Because my business has special needs, and has to upload images to qiniu, so instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the detail code in @/components/Dropzone.',
stickyTips: 'when the page is scrolled to the preset position will be sticky on the top.',
backToTopTips1: 'When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner',
backToTopTips2: 'You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally',
imageUploadTips: 'Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.'
},
table: {
dynamicTips1: 'Fixed header, sorted by header order',
dynamicTips2: 'Not fixed header, sorted by click order',
dragTips1: 'The default order',
dragTips2: 'The after dragging order',
title: 'Title',
importance: 'Imp',
type: 'Type',
remark: 'Remark',
search: 'Search',
add: 'Add',
export: 'Export',
reviewer: 'reviewer',
id: 'ID',
date: 'Date',
author: 'Author',
readings: 'Readings',
status: 'Status',
actions: 'Actions',
edit: 'Edit',
publish: 'Publish',
draft: 'Draft',
delete: 'Delete',
cancel: 'Cancel',
confirm: 'Confirm'
},
example: {
warning: 'Creating and editing views cannot be cached by keep-alive because keep-alive include does not currently support caching based on routes, so it is currently cached based on component name. If you want to achieve a similar caching effect, you can use a browser caching scheme such as localStorage. Or do not use keep-alive include to cache all views directly. See details'
},
errorLog: {
tips: 'Please click the bug icon in the upper right corner',
description: 'Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.',
documentation: 'Document introduction'
},
excel: {
export: 'Export',
selectedExport: 'Export Selected Items',
placeholder: 'Please enter the file name (default excel-list)'
},
zip: {
export: 'Export',
placeholder: 'Please enter the file name (default file)'
},
pdf: {
tips: 'Here we use window.print() to implement the feature of downloading PDF.'
},
theme: {
change: 'Change Theme',
documentation: 'Theme documentation',
tips: 'Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.'
},
tagsView: {
refresh: 'Refresh',
close: 'Close',
closeOthers: 'Close Others',
closeAll: 'Close All'
},
settings: {
title: 'Page style setting',
theme: 'Theme Color',
tagsView: 'Open Tags-View',
fixedHeader: 'Fixed Header',
sidebarLogo: 'Sidebar Logo'
}
}
zh.js
export default {
route: {
dashboard: ' ',
documentation: ' ',
personal:' ',
guide: ' ',
permission: ' ',
rolePermission: ' ',
pagePermission: ' ',
directivePermission: ' ',
icons: ' ',
components: ' ',
tinymce: ' ',
markdown: 'Markdown',
jsonEditor: 'JSON ',
dndList: ' ',
splitPane: 'Splitpane',
avatarUpload: ' ',
dropzone: 'Dropzone',
sticky: 'Sticky',
countTo: 'Count To',
componentMixin: ' ',
backToTop: ' ',
dragDialog: ' Dialog',
dragSelect: ' Select',
dragKanban: ' ',
charts: ' ',
keyboardChart: ' ',
lineChart: ' ',
mixChart: ' ',
example: ' ',
nested: ' ',
menu1: ' 1',
'menu1-1': ' 1-1',
'menu1-2': ' 1-2',
'menu1-2-1': ' 1-2-1',
'menu1-2-2': ' 1-2-2',
'menu1-3': ' 1-3',
menu2: ' 2',
Table: 'Table',
dynamicTable: ' Table',
dragTable: ' Table',
inlineEditTable: 'Table ',
complexTable: ' Table',
tab: 'Tab',
form: ' ',
createArticle: ' ',
editArticle: ' ',
articleList: ' ',
errorPages: ' ',
page401: '401',
page404: '404',
errorLog: ' ',
excel: 'Excel',
exportExcel: ' Excel',
selectExcel: ' ',
mergeHeader: ' ',
uploadExcel: ' Excel',
zip: 'Zip',
pdf: 'PDF',
exportZip: 'Export Zip',
theme: ' ',
clipboardDemo: 'Clipboard',
i18n: ' ',
externalLink: ' ',
profile: ' '
},
navbar: {
dashboard: ' ',
github: ' ',
logOut: ' ',
profile: ' ',
theme: ' ',
size: ' '
},
login: {
title: ' ',
logIn: ' ',
username: ' ',
password: ' ',
any: ' ',
thirdparty: ' ',
thirdpartyTips: ' ， ！！！'
},
documentation: {
documentation: ' ',
github: 'Github '
},
permission: {
addRole: ' ',
editPermission: ' ',
roles: ' ',
switchRoles: ' ',
tips: ' ， v-permission。 ：Element-UI el-tab el-table-column dom 。 v-if 。',
delete: ' ',
confirm: ' ',
cancel: ' '
},
guide: {
description: ' ， 。 Demo ',
button: ' '
},
components: {
documentation: ' ',
tinymceTips: ' ， 。 ， ， Tinymce。 ',
dropzoneTips: ' ， ， 。 ， @/components/Dropzone',
stickyTips: ' ',
backToTopTips1: ' ',
backToTopTips2: ' 、show/hide、 、 ， Element el-tooltip ',
imageUploadTips: ' vue@1 ， mockjs ， ， ， 。'
},
table: {
dynamicTips1: ' , ',
dynamicTips2: ' , ',
dragTips1: ' ',
dragTips2: ' ',
title: ' ',
importance: ' ',
type: ' ',
remark: ' ',
search: ' ',
add: ' ',
export: ' ',
reviewer: ' ',
id: ' ',
date: ' ',
author: ' ',
readings: ' ',
status: ' ',
actions: ' ',
edit: ' ',
publish: ' ',
draft: ' ',
delete: ' ',
cancel: ' ',
confirm: ' '
},
example: {
warning: ' keep-alive ， keep-alive include ， component name 。 ， localStorage 。 keep-alive include， 。 '
},
errorLog: {
tips: ' bug ',
description: ' spa ， ， ， 。 Vue ， 。',
documentation: ' '
},
excel: {
export: ' ',
selectedExport: ' ',
placeholder: ' ( excel-list)'
},
zip: {
export: ' ',
placeholder: ' ( file)'
},
pdf: {
tips: ' window.print() pdf '
},
theme: {
change: ' ',
documentation: ' ',
tips: 'Tips: navbar theme-pick, ， ， 。'
},
tagsView: {
refresh: ' ',
close: ' ',
closeOthers: ' ',
closeAll: ' '
},
settings: {
title: ' ',
theme: ' ',
tagsView: ' Tags-View',
fixedHeader: ' Header',
sidebarLogo: ' Logo'
}
}
vue main.jsに導入
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import i18n from './lang' // internationalization
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
i18n,
render: h => h(App)
});