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

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>
    
    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%=js%>">script>
    <% } %>
  body>

你可能感兴趣的:(vue3,1024程序员节)