代码拉取完成，页面将自动刷新
vue3 不支持 ie，所以基于 vue2 版本下的技术栈最新版本搭建模板，完美兼容 ie11
使用 ie 打开并预览 https://zqy233.github.io/vite-vue2-ie-template/#/login 👈
模板只实现了登录页面，其他页面自行添加吧
对应 vue2 使用指定版本的依赖包，其余依赖包全部使用最新版本
2.7.14 使用 2+版本的最新3.6.5 使用 3+版本的最新（3+对应 vue2，4+对应 vue3）3.6.2 使用 3+版本的最新（3+对应 vue2，4+对应 vue3）2.15.13 element-ui 对应 vue2，element-plus 对应 vue33.6.10 一款使用开发可编辑表格的表格组件库，使用 3+版本的最新（3+对应 vue2，4+对应 vue3）1.32.13 element-ui 不支持高版本的 sass，会在控制台大量警告，固定使用1.32.13版本(https://github.com/ElemeFE/element/issues/21071)public/config.js 可以用于写入一些不希望被打包压缩的配置，比如设置请求地址等等
unplugin-vue-components插件，开发环境按需导入样式会导致 vite 热更新卡顿
所以开发环境不按需导入样式，生产环境再按需导入样式
Components({
resolvers: [
ElementUiResolver({
importStyle: mode === 'development' ? false : 'sass',
}),
],
}),
按需导入样式不支持函数式组件样式，需要在vite.config.js中手动导入函数式组件的样式，定义一个插件，生产环境添加函数式组件的样式
{
name: 'import-element-ui-style',
enforce: 'pre',
transform(code, id) {
...
if (/src\/main.js$/.test(id)) {
if (mode === 'production') {
return {
code: `${code}
import 'element-ui/lib/theme-chalk/message.css';
import 'element-ui/lib/theme-chalk/notification.css';
import 'element-ui/lib/theme-chalk/message-box.css';`,
map: null,
};
}
}
},
},
element-ui 自定义主题色 https://element.eleme.cn/2.0/#/zh-CN/component/custom-theme
unplugin-vue-components按需导入样式下怎么自定义主题色创建common.scss文件，文件目录src/assets/css/common.scss，并在main.js中引入
common.scss文件内容
$--color-primary: #8956ff;
$--font-path: 'element-ui/lib/theme-chalk/fonts';
@import 'element-ui/packages/theme-chalk/src/index.scss';
main.js文件内容
import Vue from 'vue';
import Element from 'element-ui';
import '@/assets/css/common.scss';
Vue.use(Element);
无需引入 Element 编译好的 CSS 文件element-ui/lib/theme-chalk/index.css
unplugin-vue-components按需导入样式下怎么自定义主题色common.scss生产环境需要去除这两行，因为会与unplugin-vue-components按需导入样式冲突，重复导入样式了
$--font-path: 'element-ui/lib/theme-chalk/fonts';
@import 'element-ui/packages/theme-chalk/src/index.scss';
新建一个element-variables.scss全局 scss 变量文件，将 element-ui 的主题变量如$--color-primary: #8956ff;等移动到该文件中，因为unplugin-vue-components的原因，需要在additionalData全局 scss 变量文件中定义主题变量才能生效
注意！这个 scss 变量文件只应该存放一些 scss 变量，如果在这个文件里$--font-path: 'element-ui/lib/theme-chalk/fonts';@import 'element-ui/packages/theme-chalk/src/index.scss';会导致每次页面热更新时都会编译所有 element-ui 变量，热更新会卡顿至 3 秒左右
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "src/assets/css/element-variables.scss";`,
charset: false,
},
},
},
定义一个 vite 插件，只有开发时才在common.scss中加入这两行代码
{
name: 'import-element-ui-style',
enforce: 'pre',
transform(code, id) {
if (/common.scss$/.test(id)) {
if (mode === 'development') {
return {
code: `${code}
$--font-path: 'element-ui/lib/theme-chalk/fonts';
@import 'element-ui/packages/theme-chalk/src/index.scss';`,
map: null,
};
}
}
...
},
},
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手