在Element Plus中使用了主题样式切换
从vite变为vue.config.js后，出现了样式丢失问题，经过一系列查找，终于在element-plus 按需导入中自动导入修改主题色文章指导下解决了,主要为按需导入和主题色修改
初始vite配置
最初vite的配置参考与element plus官方提供的demo
https://github.com/element-plus/element-plus-vite-starter
Element Plus按需导入
安装插件
npm install -D unplugin-vue-components unplugin-auto-import
vite
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
webpack
// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = {
// ...
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
}
vue.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const {
ElementPlusResolver
} = require('unplugin-vue-components/resolvers')
module.exports = {
configureWebpack: {
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()]
}),
Components({
resolvers: [ElementPlusResolver()],
})
]
},
Element Plus主题覆盖
Element Plus主题覆盖官方提供的webpack与vite配置
vue.config.js配置
安装插件
npm i unplugin-element-plus -D
vue.config.js配置
不生效配置
const ElementPlus = require("unplugin-element-plus/webpack");
module.exports = {
configureWebpack: {
plugins: [
ElementPlus({
useSource: true,
})
]
}
但是按照如上配置后，仍然存在样式丢失的问题，在参考文档帮助下，修改成了
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const {
ElementPlusResolver
} = require('unplugin-vue-components/resolvers')
const ElementPlus = require("unplugin-element-plus/webpack");
module.exports = {
configureWebpack: {
plugins: [
AutoImport({
resolvers: [ElementPlusResolver({
importStyle: "sass" // 增加此处
})]
}),
Components({
resolvers: [ElementPlusResolver({
importStyle: "sass" // 增加此处
})],
}),
ElementPlus({
useSource: true,
})
]
}
}
附
vue.config.js全部配置
const path = require('path')
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const {
ElementPlusResolver
} = require('unplugin-vue-components/resolvers')
const ElementPlus = require("unplugin-element-plus/webpack");
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
configureWebpack: {
resolve: {
extensions: ['.js', '.vue', '.ts', '.json', '.css'],
// 配置路径别名
alias: {
'@': resolve('src'),
}
},
module: {
rules: [{
test: /\.ts/, //解析ts
loader: 'ts-loader',
exclude: /node_modules/,
options: {
transpileOnly: true,
},
}]
},
plugins: [
new SpeedMeasurePlugin(),
AutoImport({
resolvers: [ElementPlusResolver({
importStyle: "sass"
})]
}),
Components({
resolvers: [ElementPlusResolver({
importStyle: "sass"
})],
}),
ElementPlus({
useSource: true,
}),
// new HardSourceWebpackPlugin()
],
cache: {
type: 'filesystem',
allowCollectingMemory: true
}
},
// chainWebpack: config => {
// config.module
// .rule('tsx')
// .test(/\.tsx?$/)
// .use('ts-loader')
// .loader('ts-loader')
// .options({
// appendTsSuffixTo: [/\.vue$/],
// })
// },
css: {
loaderOptions: {
scss: {
additionalData: `
@use "@/styles/element/index.scss" as *;
`
}
}
},
pages: {
index: {
// page 的入口
entry: 'src/main.ts',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'test',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
}
}
package.json
{
"name": "TEST",
"private": true,
"version": "0.1.0",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
},
"dependencies": {
"@vue/cli-service": "^5.0.8",
"axios": "^1.3.5",
"clean-webpack-plugin": "^4.0.0",
"element-plus": "^2.2.13",
"eslint": "^8.37.0",
"mitt": "^3.0.0",
"speed-measure-webpack-plugin": "^1.5.0",
"style-loader": "^3.3.2",
"ts-loader": "^9.4.2",
"vite": "^4.2.1",
"vite-plugin-style-import": "^2.0.0",
"vue": "^3.2.36",
"vue-router": "^4.1.6",
"vuex": "^4.0.2",
"xe-utils": "^3.5.7",
"xlsx": "^0.18.5"
},
"devDependencies": {
"@iconify-json/ep": "^1.1.4",
"@types/node": "^18.14.0",
"@types/nprogress": "^0.2.0",
"@vitejs/plugin-vue": "^4.1.0",
"@vue/compiler-sfc": "^3.3.2",
"less": "^4.1.3",
"less-loader": "^11.1.2",
"mini-css-extract-plugin": "^2.7.6",
"mockjs": "^1.1.0",
"rollup-plugin-visualizer": "^5.9.0",
"sass": "^1.62.1",
"sass-loader": "^13.3.1",
"typescript": "^4.7.2",
"unocss": "^0.49.7",
"unplugin-auto-import": "^0.16.4",
"unplugin-element-plus": "^0.7.1",
"unplugin-vue-components": "^0.24.1",
"vite-plugin-mock": "^2.9.6",
"vite-ssg": "^0.22.1",
"vue-loader": "^16.8.3",
"vue-template-compiler": "^2.7.14",
"vue-tsc": "^1.1.3",
"webpack-cli": "^5.1.1"
},
"license": "MIT"
}
目前的问题就是打包太慢了……
