小记一波vite+vue3+ts+element-plus配置与问题

2023-06-21 523 阅读1分钟

区分生产开发测试环境

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

简单理解下 --mode 后面跟的模式可以区分import.meta.env.MODE选项可以用来配置网络环境或者独特变量等场景

if(import.meta.env.MODE === 'development'){
  BASE_URL = '/api'
}else if(import.meta.env.MODE === 'production'){
  BASE_URL = 'https://sp.zhiwugou.cn/'
}else{
  BASE_URL = 'http://192.168.0.100:8085/'
}

自动导入element-plus组件后指令命令引入报错

模块 ""element-plus"" 没有导出的成员 "Elloading"。你是想改用 "import Elloading from "element-plus"" 吗?

github.com/element-plu…

自动导入样式丢失问题

// vite.config.ts
import ElementPlus from 'unplugin-element-plus/vite'
plugins: [
    ...
    ElementPlus({})
  ],