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

最新推荐文章于 2024-04-25 08:57:56 发布

Gik99

最新推荐文章于 2024-04-25 08:57:56 发布

阅读量662

点赞数 1

分类专栏： vue3 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/Gik99/article/details/134003357

版权

vue3 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

二、public下index.html中

<body>
    <div id="app"></div>
    <!-- 引入JS -->
    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%=js%>"></script>
    <% } %>
  </body>