quasar利用i18n實現國際化

安裝依賴（vue-i18n）

npm install vue-i18n

建立 src/boot/i18n.js 檔案，內容如下

import vue from 'vue'
import vuei18n from 'vue-i18n'
import messages from 'src/i18n'
vue.use(vuei18n)
const i18n = new vuei18n()
}// if you need to import it from
// other files, then:
export

建立 src/i18n/ 資料夾，裡面存放專案所支援的每種語言的定義，示例目錄如下

index.js

在 quasar.config.js 檔案中的 boot 小節中引用翻譯檔案

// quasar.conf.js

return

5. 在sfc中設定翻譯塊

要通過vue-i18n-loader在vue檔案中使用嵌入式模板元件，必須確保使用所選的包管理器將@intlify/vue-i18n-loader和yaml-loader依賴項新增到專案中。然後在quasar.conf.js檔案中更改webpack構建選項。在這種情況下，翻譯以yaml格式儲存在塊中。

// quasar.conf.js
build: ,
]// 或者下面這種寫法也可以
// loader: '@kazupon/vue-i18n-loader ! yaml-loader'
})...
}}

webpack 配置中允許指定多個 loader，可以在 import 語句或任何等效於「import」的方式中指定 loader。使用 ! 將資源中的 loader 分開。分開的每個部分都相對於當前目錄解析。

import styles from 'style-loader!css-loader?modules!./styles.css';

通過前置所有規則及使用 !，可以對應覆蓋到配置中的任意 loader。

例如現在需要新增乙個新的語言——德語

建立新檔案，src/i18n/de/index.js然後在其中複製檔案內容，src/i18n/en-us/index.js然後更改語言字串。

更改src/i18n/index.js並在其中新增新de語言。

import enus from './en-us'
import de from './de'
export default

主要有三種情況

在html正文中 (mykey1)

在屬性中 (mykey2)

以程式設計的方式 (mykey3)

// or
// }

在配置完成後，雖然頁面內部**已經完成了語言的切換，但是需要進行頁面的重新整理才能夠在頁面中展示出來，手動重新整理會導致頁面仍保持預設語言，所以還需要進行下面的配置

src/boot/i18n.js

const i18n = new vuei18n();

src/store/user/mutations.js

// 語言切換器
export const set_lang = (state, data) => ;

src/store/user/state.js

export default ;

語言切換設定頁面

watch: 
}

quasar利用i18n實現國際化

i18n呼叫自己引數 I18N的前後端實現

Cakephp中如何實現i18n？

I18N對應備忘表

quasar利用i18n實現國際化

i18n呼叫自己引數 I18N的前後端實現

Cakephp中如何實現i18n？

I18N對應備忘表

相關推薦