vue3打包时如何通过cdn引入echarts

一、vue.config.js中配置
二、public下index.html中

一、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
    })
  },
  //--------------------------------------------
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

二、public下index.html中

<body>
    <div id="app">div>
    
    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%=js%>">script>
    <% } %>
  body>
1
2
3
4
5
6
7

相关阅读:
ORACLE常见错误编码大全
37 | 什么是SLI、SLO、SLA
数据要素价值：在数字时代的血脉中流淌
Vue框架学习笔记——v-bind数据单向绑定和v-model数据双向绑定
HALCON 22.11来了
[报错解决]（Error Creating bean with name ‘xxx‘）类问题解决思路
MyBatisPlue-03
【读论文】【精读】3D Gaussian Splatting for Real-Time Radiance Field Rendering
Collection体系集合
[leetCode152]乘积最大子数组

原文地址：https://blog.csdn.net/Gik99/article/details/134003357