- 安装插件
pnpm i element-plus echarts axios lodash -S
- 在 vite.config.js 引用
注意事项:element-plus 不能在 vite.config.js 中使用按需加载,需要在 main.js 中全局引入;
import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入 vite-plugin-cdn-import 插件
import { Plugin as importToCDN } from 'vite-plugin-cdn-import'
const pathSrc = resolve(__dirname, 'src')
// https://vitejs.dev/config/
export default defineConfig({
// 打包base访问地址,和webpack 的base一样,默认 ./ 就好了
base: './',
plugins: [
vue(),
// 配置 CDN
importToCDN({
modules: [
{
name: 'vue',
var: 'Vue',
path: 'https://cdn.jsdelivr.net/npm/vue@3.5.10/dist/vue.global.min.js'
},
{
name: 'element-plus', // 依赖名称,
var: 'ElementPlus', // 全局变量名
path: 'https://cdn.jsdelivr.net/npm/element-plus@2.8.4/dist/index.full.min.js', // CDN 链接
css: 'https://cdn.jsdelivr.net/npm/element-plus@2.8.4/dist/index.min.css' // 依赖有css就填,没有就去掉这个
},
{
name: 'axios',
var: 'axios',
path: 'https://cdn.jsdelivr.net/npm/axios@1.7.7/dist/axios.min.js'
},
{
name: 'echarts',
var: 'echarts',
path: 'https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js'
},
{
name: 'lodash',
var: '_',
path: 'https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js'
}
]
}),
{
name: 'inline-js-css',
apply: 'build', // 仅在构建阶段生效
enforce: 'post', // 在其他插件之后执行
generateBundle(outputOptions, bundle) {
for (const fileName in bundle) {
const asset = bundle[fileName]
// 获取HTML文件
const htmlFile = bundle['index.html']
if (!htmlFile) return
// 删除原始JS/CSS文件代码
if (fileName.endsWith('.html')) {
// console.log(asset)
// 删除原始JS/CSS文件引入
htmlFile.source = htmlFile.source.replace(
/<script type="module".*<\/script>/g,
''
)
htmlFile.source = htmlFile.source.replace(
/<link rel="stylesheet".*\.css">/g,
''
)
} else if (fileName.endsWith('.js')) {
// 将JS内联到HTML文件中
htmlFile.source += `\n<script>\n${asset.code}\n</script>\n`
// 删除原始JS文件
delete bundle[fileName]
} else if (fileName.endsWith('.css')) {
// 将CSS内联到HTML文件中
htmlFile.source += `\n<style>\n${asset.source}\n</style>\n`
// 删除原始CSS文件
delete bundle[fileName]
}
}
}
}
],
server: {
host: '0.0.0.0',
.......
}
})
- main.js 引入
CDN 引入只有在 build 打包出来的才是 CDN 引入,本地开发走的还是 NPM 本地包引入, 所以先使用 NPM 方式引入
import { createApp, provide } from 'vue'
import ElementPlus from 'element-plus'
import './style.scss'
import App from './App.vue'
createApp(App)
.provide('global', {
theme: 'theme-white'
})
.use(ElementPlus)
.mount('#app')
- 打包测试
执行打包 命令npm run build
,依赖变为 CDN 引入,外部的 js 文件和 css 文件集成到 index.html 中