build: 设置多语言
This commit is contained in:
陈凯龙
parent
4050d56c19
commit
45e879edee
|
|
@ -8,5 +8,5 @@
|
||||||
/src/types/env.d.ts
|
/src/types/env.d.ts
|
||||||
/dist*
|
/dist*
|
||||||
/src/main.ts
|
/src/main.ts
|
||||||
/src/auto-imports.d.ts
|
/src/types/auto-imports.d.ts
|
||||||
/src/components.d.ts
|
/src/types/components.d.ts
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,6 @@ node_modules
|
||||||
dist
|
dist
|
||||||
dist-ssr
|
dist-ssr
|
||||||
*.local
|
*.local
|
||||||
/src/components.d.ts
|
/src/types/components.d.ts
|
||||||
/src/auto-imports.d.ts
|
/src/types/auto-imports.d.ts
|
||||||
/dist*
|
/dist*
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"0 debug pnpm:scope": {
|
||||||
|
"selected": 1
|
||||||
|
},
|
||||||
|
"1 error pnpm": {
|
||||||
|
"errno": 1,
|
||||||
|
"code": "ELIFECYCLE",
|
||||||
|
"pkgid": "new-element-plus-admin@0.0.0",
|
||||||
|
"stage": "clean",
|
||||||
|
"script": "npx rimraf docs/node_modules && npx rimraf node_modules",
|
||||||
|
"pkgname": "new-element-plus-admin",
|
||||||
|
"err": {
|
||||||
|
"name": "pnpm",
|
||||||
|
"message": "new-element-plus-admin@0.0.0 clean: `npx rimraf docs/node_modules && npx rimraf node_modules`\nExit status 1",
|
||||||
|
"code": "ELIFECYCLE",
|
||||||
|
"stack": "pnpm: new-element-plus-admin@0.0.0 clean: `npx rimraf docs/node_modules && npx rimraf node_modules`\nExit status 1\n at EventEmitter.<anonymous> (C:\\Users\\admin\\AppData\\Roaming\\nvm\\v16.0.0\\node_modules\\pnpm\\dist\\pnpm.cjs:103540:20)\n at EventEmitter.emit (node:events:365:28)\n at ChildProcess.<anonymous> (C:\\Users\\admin\\AppData\\Roaming\\nvm\\v16.0.0\\node_modules\\pnpm\\dist\\pnpm.cjs:91469:18)\n at ChildProcess.emit (node:events:365:28)\n at maybeClose (node:internal/child_process:1067:16)\n at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
133
index.html
133
index.html
|
|
@ -4,10 +4,139 @@
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite App</title>
|
<title></title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app">
|
||||||
|
<style>
|
||||||
|
.app-loading {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #f0f2f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-loading .app-loading-wrap {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
display: flex;
|
||||||
|
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||||
|
transform: translate3d(-50%, -50%, 0);
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-loading .app-loading-title {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-loading .app-loading-logo {
|
||||||
|
/* width: 100px; */
|
||||||
|
margin: 0 auto 15px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-loading .app-loading-item {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
vertical-align: middle;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-loading .app-loading-outter {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 4px solid #2d8cf0;
|
||||||
|
border-bottom: 0;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-loading .app-loading-inner {
|
||||||
|
position: absolute;
|
||||||
|
top: calc(50% - 20px);
|
||||||
|
left: calc(50% - 20px);
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border: 4px solid #87bdff;
|
||||||
|
border-right: 0;
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes loader-outter {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loader-outter {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes loader-inner {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(-360deg);
|
||||||
|
transform: rotate(-360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loader-inner {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(-360deg);
|
||||||
|
transform: rotate(-360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="app-loading">
|
||||||
|
<div class="app-loading-wrap">
|
||||||
|
<div class="app-loading-title">
|
||||||
|
<img src="/logo.png" class="app-loading-logo" alt="Logo" />
|
||||||
|
<div class="app-loading-title">vue-element-plus-admin</div>
|
||||||
|
</div>
|
||||||
|
<div class="app-loading-item">
|
||||||
|
<div class="app-loading-outter"></div>
|
||||||
|
<div class="app-loading-inner"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<script type="module" src="/src/main.ts"></script>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@
|
||||||
"serve:dev": "vite preview --mode dev",
|
"serve:dev": "vite preview --mode dev",
|
||||||
"serve:test": "vite preview --mode test",
|
"serve:test": "vite preview --mode test",
|
||||||
"check": "npx npm-check-updates",
|
"check": "npx npm-check-updates",
|
||||||
|
"clean": "npx rimraf docs/node_modules && npx rimraf node_modules",
|
||||||
"clean:cache": "npx rimraf node_modules/.cache",
|
"clean:cache": "npx rimraf node_modules/.cache",
|
||||||
"lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
|
"lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
|
||||||
"lint:format": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,vue,html,md}\"",
|
"lint:format": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,vue,html,md}\"",
|
||||||
|
|
@ -22,12 +23,14 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vueuse/core": "^7.1.2",
|
"@vueuse/core": "^7.1.2",
|
||||||
"vue": "^3.2.16",
|
"vue": "^3.2.24",
|
||||||
|
"vue-i18n": "9.1.9",
|
||||||
"vue-router": "^4.0.12"
|
"vue-router": "^4.0.12"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@commitlint/cli": "^15.0.0",
|
"@commitlint/cli": "^15.0.0",
|
||||||
"@commitlint/config-conventional": "^15.0.0",
|
"@commitlint/config-conventional": "^15.0.0",
|
||||||
|
"@intlify/vite-plugin-vue-i18n": "^3.2.1",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.6.0",
|
"@typescript-eslint/eslint-plugin": "^5.6.0",
|
||||||
"@typescript-eslint/parser": "^5.6.0",
|
"@typescript-eslint/parser": "^5.6.0",
|
||||||
"@vitejs/plugin-vue": "^1.9.3",
|
"@vitejs/plugin-vue": "^1.9.3",
|
||||||
|
|
@ -56,7 +59,7 @@
|
||||||
"typescript": "^4.4.3",
|
"typescript": "^4.4.3",
|
||||||
"unplugin-auto-import": "^0.5.1",
|
"unplugin-auto-import": "^0.5.1",
|
||||||
"unplugin-vue-components": "^0.17.6",
|
"unplugin-vue-components": "^0.17.6",
|
||||||
"vite": "^2.6.4",
|
"vite": "2.6.14",
|
||||||
"vite-plugin-eslint": "^1.3.0",
|
"vite-plugin-eslint": "^1.3.0",
|
||||||
"vite-plugin-vue-setup-extend": "^0.1.0",
|
"vite-plugin-vue-setup-extend": "^0.1.0",
|
||||||
"vite-plugin-windicss": "^1.5.4",
|
"vite-plugin-windicss": "^1.5.4",
|
||||||
|
|
|
||||||
1632
pnpm-lock.yaml
1632
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
21
src/App.vue
21
src/App.vue
|
|
@ -1,17 +1,26 @@
|
||||||
<script setup lang="ts">
|
|
||||||
// This starter template is using Vue 3 <script setup> SFCs
|
|
||||||
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
|
|
||||||
import HelloWorld from './components/HelloWorld.vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>sss</div>
|
<div>sss</div>
|
||||||
<div v:bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"> sssss </div>
|
<div v:bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"> sssss </div>
|
||||||
<img alt="Vue logo" src="./assets/logo.png" />
|
<img alt="Vue logo" src="./assets/logo.png" />
|
||||||
<div>sss</div>
|
<div>sss</div>
|
||||||
<HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
|
<HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
|
||||||
|
<div>{{ t('test.about') }}</div>
|
||||||
|
<div>{{ t('test2.go') }}</div>
|
||||||
|
<button @click="change">切换语言</button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
// This starter template is using Vue 3 <script setup> SFCs
|
||||||
|
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
|
||||||
|
import HelloWorld from './components/HelloWorld.vue'
|
||||||
|
const { t, availableLocales, locale } = useI18n()
|
||||||
|
|
||||||
|
function change() {
|
||||||
|
const locales = availableLocales
|
||||||
|
locale.value = locales[(locales.indexOf(locale.value) + 1) % locales.length]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
#app {
|
#app {
|
||||||
margin-top: 60px;
|
margin-top: 60px;
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 450 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
|
|
@ -0,0 +1,8 @@
|
||||||
|
export default {
|
||||||
|
test: {
|
||||||
|
about: 'About'
|
||||||
|
},
|
||||||
|
test2: {
|
||||||
|
go: 'Go'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
export default {
|
||||||
|
test: {
|
||||||
|
about: '关于'
|
||||||
|
},
|
||||||
|
test2: {
|
||||||
|
go: '去'
|
||||||
|
}
|
||||||
|
}
|
||||||
12
src/main.ts
12
src/main.ts
|
|
@ -1,8 +1,14 @@
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
|
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
|
|
||||||
import 'virtual:windi.css'
|
const app = createApp(App)
|
||||||
|
|
||||||
import 'virtual:windi-devtools'
|
// 引入windi css
|
||||||
|
import '@/plugins/windicss'
|
||||||
|
|
||||||
createApp(App).mount('#app')
|
// 引入多语言
|
||||||
|
import { setupI18n } from '@/plugins/i18n'
|
||||||
|
setupI18n(app)
|
||||||
|
|
||||||
|
app.mount('#app')
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import { createI18n } from 'vue-i18n'
|
||||||
|
import type { App } from 'vue'
|
||||||
|
|
||||||
|
const messages = Object.fromEntries(
|
||||||
|
Object.entries(import.meta.globEager('../../locales/*.ts')).map(([key, value]) => {
|
||||||
|
return [key.slice(14, -3), value.default]
|
||||||
|
})
|
||||||
|
)
|
||||||
|
|
||||||
|
export function setupI18n(app: App<Element>): void {
|
||||||
|
const i18n = createI18n({
|
||||||
|
legacy: false,
|
||||||
|
locale: 'zh-CN',
|
||||||
|
messages
|
||||||
|
})
|
||||||
|
app.use(i18n)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import 'virtual:windi.css'
|
||||||
|
|
||||||
|
import 'virtual:windi-devtools'
|
||||||
|
|
@ -22,9 +22,8 @@
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": ["src/*"]
|
"@/*": ["src/*"]
|
||||||
}
|
},
|
||||||
|
"types": ["vite/client", "@intlify/vite-plugin-vue-i18n/client"]
|
||||||
},
|
},
|
||||||
"types": ["element-plus/global", "vite/client"],
|
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||||
"typeRoots": ["./node_modules/@types/", "./types"],
|
|
||||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "components.d.ts"]
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ import VueJsx from '@vitejs/plugin-vue-jsx'
|
||||||
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
|
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
|
||||||
import EslintPlugin from 'vite-plugin-eslint'
|
import EslintPlugin from 'vite-plugin-eslint'
|
||||||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||||||
|
import VueI18n from '@intlify/vite-plugin-vue-i18n'
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
const root = process.cwd()
|
const root = process.cwd()
|
||||||
|
|
@ -38,14 +39,14 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
|
||||||
imports: [
|
imports: [
|
||||||
'vue',
|
'vue',
|
||||||
'vue-router',
|
'vue-router',
|
||||||
// 'vue-i18n',
|
'vue-i18n',
|
||||||
'@vueuse/core'
|
'@vueuse/core'
|
||||||
],
|
],
|
||||||
dts: 'src/auto-imports.d.ts'
|
dts: 'src/types/auto-imports.d.ts'
|
||||||
}),
|
}),
|
||||||
Components({
|
Components({
|
||||||
// allow auto load markdown components under `./src/components/`
|
// allow auto load markdown components under `./src/components/`
|
||||||
dirs: ['src/components', 'src/layout'],
|
dirs: ['src/components'],
|
||||||
extensions: ['vue', 'md'],
|
extensions: ['vue', 'md'],
|
||||||
// allow auto import and register components used in markdown
|
// allow auto import and register components used in markdown
|
||||||
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
|
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
|
||||||
|
|
@ -53,11 +54,15 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
|
||||||
resolvers: [
|
resolvers: [
|
||||||
[ElementPlusResolver()]
|
[ElementPlusResolver()]
|
||||||
],
|
],
|
||||||
dts: 'src/components.d.ts'
|
dts: 'src/types/components.d.ts'
|
||||||
}),
|
}),
|
||||||
EslintPlugin({
|
EslintPlugin({
|
||||||
cache: false,
|
|
||||||
include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件
|
include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件
|
||||||
|
}),
|
||||||
|
VueI18n({
|
||||||
|
runtimeOnly: true,
|
||||||
|
compositionOnly: true,
|
||||||
|
include: [pathResolve(__dirname, 'src/locales/**')],
|
||||||
})
|
})
|
||||||
],
|
],
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue