vue项目CDN引入

注：一些对系统并不是至关重要的文件诸如字体文件、css重置、js小插件、背景图片等可能适合使用CDN，因为即使CDN文件不可用，网站也能做到平稳退化。第一步：public/index.html 里⬇️注:需引入vue并且main.js中正常引入，但element-ui就无需引入，可以直接使用<!DOCTYPE html><html><head><link

由本

6396人浏览 · 2021-05-26 15:15:21

由本 · 2021-05-26 15:15:21 发布

注：一些对系统并不是至关重要的文件诸如字体文件、css重置、js小插件、背景图片等可能适合使用CDN，因为即使CDN文件不可用，网站也能做到平稳退化。

第一步：public/index.html 里⬇️

注:需引入vue并且main.js中正常引入，但element-ui就无需引入，可以直接使用
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> // element-ui的css
  </head>
  <body>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> // vue引入，必须放在第一个
    <script src="https://cdn.bootcss.com/element-ui/2.3.3/index.js"></script> // element-ui引入
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=自己的ak"></script> // 百度地图引入，注意替换掉自己的ak
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts.common.js"></script> // echarts引入
  </body>
</html>

第二步：vue.config.js中⬇️

module.exports = {
  chainWebpack: config => {
    config.set('externals', {
      vue: 'Vue',
      'element-ui': 'ELEMENT',
      BMap: 'BMap', // 百度地图
      echarts: 'echarts'
      // 'vue-quill-editor': "VueQuillEditor", // 富文本
    })
    return config
  }
}