安裝element-plus

進入vuepress根目錄，執行命令

npm install element-plus

修改 clientAppEnhance.js

接下來需要修改用于客戶端應用增強的docs/.vuepress/clientAppEnhance.js文件
vuepress的目錄結構如下：

. ├── docs │ ├── .vuepress (可選的) │ │ ├── components (可選的) │ │ ├── theme (可選的) │ │ │ └── Layout.vue │ │ ├── public (可選的) │ │ ├── styles (可選的) │ │ │ ├── index.styl │ │ │ └── palette.styl │ │ ├── templates (可選的, 謹慎配置) │ │ │ ├── dev.html │ │ │ └── ssr.html │ │ ├── config.js (可選的) │ │ └── clientAppEnhance.js (可選的) <-- 修改這個文件 │ │ │ ├── README.md │ ├── guide │ │ └── README.md │ └── config.md │ └── package.json

修改后文件如下：

import * as Icons from '@element-plus/icons-vue' import { defineClientAppEnhance } from '@vuepress/client' import ElementPlus from 'element-plus' import 'element-plus/theme-chalk/index.css'export default defineClientAppEnhance(({ app }) => {app.use(ElementPlus)// iconfor (const icon in Icons) {// eslint-disable-next-line import/namespaceapp.component('ElIcon' + icon, Icons[icon])} })

chainWebpack配置
參考：https://v2.vuepress.vuejs.org/reference/bundler/webpack.html#chainwebpack

chainWebpack = (config, isServer, isBuild) => {config.resolve.extensions.add('.mjs')// https://github.com/webpack/webpack/issues/11467#issuecomment-691873586config.module.rule('esm').test(/\.m?jsx?$/).resolve.set('fullySpecified', false).end().type('javascript/auto')}

vite配置

if (app.env.isDev && app.options.bundler.endsWith('vite')) {// eslint-disable-next-line import/no-extraneous-dependenciesapp.options.bundlerConfig.viteOptions = require('vite').mergeConfig(app.options.bundlerConfig.viteOptions,{optimizeDeps: {include: ['lodash'],},})}

使用

接下來就可以像往常一樣食用element的組件了

<el-button type="success">按鈕</el-button>

NPM

Install

npm i -D @starzkg/vuepress-plugin-element-plus

或

yarn add -D @starzkg/vuepress-plugin-element-plus

參考源碼

• https://github.com/vuejs/vue-cli/blob/next/packages/%40vue/cli-service/lib/config/base.js#L16-L21

Issue

• [Bug Report] 1.2.0-beta.1 cannot resolve lodash
• Struggling to use with WebPack5

參考文章

• vuepress集成element-ui
• webpack打包導入的文件時候省略后綴名設置
• npm:webpack-chain

總結

以上是生活随笔為你收集整理的vuepress 2.x 集成 element-plus的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。