注:一些对系统并不是至关重要的文件诸如字体文件、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
}
}
免费CDN网站,在里面前端大部分插件等都能找到,BootCDN2018年中挂过一次