使用Vue-cli 3.x 實作 i18n 多國語系網站

<ul style="box-sizing: inherit; margin: 0px 0px 15px 15px; padding: 0px 0px 0px 10px; list-style: disc; color: rgb(74, 74, 74); font-family: roboto, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 1px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;"> 安裝 vue-i18n

<p style="box-sizing: inherit; margin: 0px 0px 15px; font-family: roboto, sans-serif; line-height: 30px; text-indent: 1.5em; color: rgb(74, 74, 74); font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 1px; orphans: 2; text-align: start; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">繼 在 Node JS 使用 vue-cli 3 快速開發網頁與佈署到 github-pages 後，接下來要實作 i18n 多國語系網站，npm 安裝的方式，指令是 npm install vue-i18n ，在 Vue i18n 官方文件中有提供 Vue-cli 3 專用的 vue add i18n 指令

<div class="enlighter-default enlighter-v-standard enlighter-t-droide enlighter-hover enlighter-linenumbers enlighter-overflow-scroll " style="box-sizing: inherit; font-family: "Source Code Pro", "Liberation Mono", "Courier New", Courier, monospace; font-size: 12px; line-height: 1.35em; overflow: auto hidden; white-space: pre-wrap; overflow-wrap: normal !important; margin: 0px 0px 20px; padding: 0px; position: relative; text-align: left; direction: ltr; display: block; background-color: rgb(247, 247, 249); border: 1px solid rgb(224, 224, 224); color: rgb(74, 74, 74); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 1px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> PS nodejs\vue2-apps > vue add i18n

� Installing vue-cli-plugin-i18n...

+ vue-cli-plugin-i18n@ 1.0 . 1

added 17 packages from 15 contributors and audited 1631 packages in 80.325 s

55 packages are looking for funding

run `npm fund` for details

<img alt="✔" class="emoji" draggable="false" role="img" src="https://s.w.org/images/core/emoji/12.0.0-1/svg/2714.svg" style="box-sizing: inherit; border: medium none !important; vertical-align: -0.1em !important; height: 1em; max-width: 100%; display: inline !important; box-shadow: none !important; width: 1em; margin: 0px 0.07em !important; background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px !important; padding: 0px !important;" title=""> Successfully installed plugin: vue-cli-plugin-i18n

? The locale of project localization. en

? The fallback locale of project localization. en

? The directory where store localization messages of project. It's stored under `src` directory. locales

? Enable locale messages in Single file components ? No

<p style="box-sizing: inherit; margin: 0px 0px 15px; font-family: roboto, sans-serif; line-height: 30px; text-indent: 1.5em; color: rgb(74, 74, 74); font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 1px; orphans: 2; text-align: start; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">安裝完後，由下圖可以知道 vue add i18n 指令幫我們作了很多事，實在太方便了

<p style="box-sizing: inherit; margin: 0px 0px 15px; font-family: roboto, sans-serif; line-height: 30px; text-indent: 1.5em; color: rgb(74, 74, 74); font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 1px; orphans: 2; text-align: start; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;"> 繼續閱讀

MISTECH 技術手抄本

歡迎光臨 MIS 工作者在痞客邦的小天地

使用Vue-cli 3.x 實作 i18n 多國語系網站

Google Search 站內文章搜尋

熱門文章

bloggerads-header

BloggerADs

參觀人氣

文章分類

PTC-Windchill (1)

Server (6)

Java (5)

Oracle EBS (4)

PL/SQL (1)

DataBase (2)

PHP (2)

HTML (2)

JavaScript (1)

XOOPS (2)

Linux (1)

個人資訊

誰來我家