vue3学习——elementPlus安装及国际化

引入完整的elementPlus

安装

pnpm i element-plus

引入

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

图标，需单独安装

pnpm i @element-plus/icons-vue

// vue文件  按需引入就可以了
<script lang="ts" setup>
import {
  Check,
  Delete
} from '@element-plus/icons-vue'
</script>

配置国际化

// main.ts
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
app.use(ElementPlus, {
  locale: zhCn,
})

打包问题

由于国际化引入的是mjs文件，so需要忽略对他的校验，即可打包成功

// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

src别名的配置

// vite.config.ts
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
        }
    }
})

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
    "paths": { //路径映射，相对于baseUrl
      "@/*": ["src/*"] 
    }
  }
}

如不生效还是有红线，则重启编辑器

环境变量的配置

创建文件

.env.development
.env.production
.env.test

文件内容

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = '后台管理'
VITE_APP_BASE_API = '/dev-api'

NODE_ENV = 'production'
VITE_APP_TITLE = '后台管理'
VITE_APP_BASE_API = '/prod-api'

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'test'
VITE_APP_TITLE = '后台管理'
VITE_APP_BASE_API = '/test-api'

配置运行命令：package.json

"scripts": {
    "dev": "vite --open",
    "build:test": "vue-tsc && vite build --mode test",
    "build:pro": "vue-tsc && vite build --mode production"
  },

通过import.meta.env获取环境变量