vue cdn引用

MoRan_Lei

已于 2022-03-29 17:23:12 修改

阅读量3k

点赞数 1

分类专栏： Web前端文章标签： vue.js

于 2022-03-29 17:14:58 首次发布

本文链接：https://blog.csdn.net/MoRan_Lei/article/details/123825080

版权

Web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言~~~

搭建vue项目时，如果使用了多插件的情况在打包的时候会全部加载进来，打成的包会很大，导致在加载程序的时候速度上会有一些影响，这时候就是用到了cdn这个东东

1、查找cdn的时候我用的是（360的奇舞团CDN）、（今日头条CDN）

360奇舞团地址：静态资源托管库

今日头条地址：字节跳动静态资源公共库

2、这里将以vue-echart举例，我们一般引用echart的时候都是直接引用，这时就像上所述在打包时出现资源较大的情况，所以使用了cdn，vue对于echart之类的插件都有很好的集成，这里可以使用（vue-资源）去cdn中进行查找

3、配置我们需要的cdn 引入js、css等这里 process.env.NODE_ENV === 'production' 对环境进行一个校验，默认是生产环境使用了cdn

注意：

1）、这里有几个注意的地方 vueEcharts 名字不是随意取的，在自己的cdn中查找一下如下：

2）、config里面各项配置说明见文章：config说明

上面描述完了，接下来就是加载cdn的过程说一下个人的理解，系统启动时候会自动加载config.js，在预编译的时候把组件给加载进来，进行打包到html模板中，在public的index中配置对应的cdn去加载相当于一个生成文件的入口，打包的时候会将css和js放到这里面，之后在输出到目录里面

vue.config.js中配置的

module.exports = {
  devServer: {
    port: 12000,
    proxy: {
      '/manage': {
        target: 'http://localhost:24030',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/manage': '/',
        },
      },
    },
  },
  chainWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      var externals = {
        vue: 'Vue',
        vuex: 'Vuex',
        echarts: 'echarts',
        'element-ui': 'ELEMENT',
        'vue-router': 'VueRouter',
        'vue-echarts': 'VueECharts',
      }
      config.externals(externals)

      const cdn75 = {
        // 360的奇舞团CDN
        css: [
          // element-ui.css
          'https://lib.baomitu.com/element-ui/2.14.1/theme-chalk/index.min.css',
        ],
        js: [
          // vue-echarts.js
          'https://lib.baomitu.com/vue-echarts/6.0.2/index.umd.min.js',
        ],
      }

      const cdnToutiao = {
        // 今日头条CDN
        css: [
          // element-ui.css
          'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/element-ui/2.14.1/theme-chalk/index.min.css',
        ],
        js: [
          // vue-echarts.js
          'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue-echarts/6.0.2/index.umd.min.js',
        ],
      }

      const jsDelivr = {
        // 今日头条CDN
        css: [
          // element-ui.css
          'https://cdn.jsdelivr.net/npm/element-ui@2.14.1/lib/theme-chalk/index.css',
        ],
        js: [
          // vue-echarts.js
          'https://cdn.jsdelivr.net/npm/vue-echarts@6.0.2/dist/index.umd.min.js',
        ],
      }

      config.plugin('html').tap((args) => {
        args[0].cdn75 = cdn75
        args[0].cdnToutiao = cdnToutiao
        args[0].jsDelivr = jsDelivr
        return args
      })
    }
  },
}

.public/index.html（重点不是全部复制哈，这里是引入了对应的样式和js，有校验的前提）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="program" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">

    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <title><%= htmlWebpackPlugin.options.title %></title>

    <!-- 引入样式 -->
    <% if (process.env.NODE_ENV === 'production') { %>
      <% for(var css of htmlWebpackPlugin.options.cdn75.css) { %>
        <link rel="stylesheet" href="<%=css%>" as="style">
      <% } %>
    <% } %>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>

    <!-- 引入JS -->
    <% if (process.env.NODE_ENV === 'production') { %>
      <% for(var js of htmlWebpackPlugin.options.cdn75.js) { %>
        <script src="<%=js%>"></script>
      <% } %>
    <% } %>

    <div id="app">
      <div>正在加载系统资源，请耐心等待</div>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>