vue3打包时如何通过cdn引入echarts
一、vue.config.js中配置
const { defineConfig } = require('@vue/cli-service')
//-------------------新增-------------------------
let cdn = { css: [], js: [] }
// 通过环境变量 来区分是否使用cdn
const isProd = process.env.NODE_ENV === 'development' // 判断是否是生产环境
let externals = {}
if (isProd) {
// 如果是生产环境 就排除打包 否则不排除
externals = {
// key(包名) / value(这个值 是 需要在CDN中获取js, 相当于 获取的js中 的该包的全局的对象的名字)
echarts: 'echarts',
}
cdn = {
css: [], // 放置css文件目录
js: [
'https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.common.js', // vuejs
], // 放置js文件目录
}
}
//--------------------------------------------
module.exports = defineConfig({
lintOnSave: false,
transpileDependencies: true,
devServer: {
client: {
overlay: false,
},
},
//------------------新增--------------------------
configureWebpack: {
externals: externals,
},
chainWebpack(config) {
config.plugin('html').tap((args) => {
args[0].cdn = cdn
return args
})
},
//--------------------------------------------
})
二、public下index.html中
<body>
<div id="app"></div>
<!-- 引入JS -->
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%=js%>"></script>
<% } %>
</body>
本文含有隐藏内容，请 开通VIP 后查看