vue实践问题1-cdn引入js
本文主要记录一些实际开发的问题（连载）
- 问题描述：如何将vendor内部大文件js使用外部cdn引入
- 需解决问题1：如何保证内部使用正常
- 需解决问题2：如何保证cdn失败时查找本地
- 这里使用引入ant库为小例子，在index.html引入cdn
-
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.27.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ant-dcesign-vue@1.6.3/dist/antd.min.js"></script>
<link rel="stylesheet" type="text/css" href="./antd.css"/> //css文件推荐直接使用本地
-
- 在base.conf.js中添加粗体代码
-
module.exports = {
externals: {
vue: 'Vue',
'moment': 'moment',
'ant-design-vue': "antd"
},
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
-
- main.js引入如下
-
import Vue from 'vue'
import antd from 'ant-design-vue'
Vue.use(antd)
-
- cdn失败时本地引入，如
-
<script>window.Vue || document.write(unescape("%3Cscript src='./vue.min.js'%3E%3C/script%3E"))</script>
<script>window.antd || document.write(unescape("%3Cscript src='./antd.js'%3E%3C/script%3E"))</script>
<script>window.moment || document.write(unescape("%3Cscript src='./moment.min.js'%3E%3C/script%3E"))</script>
-
之后正常使用即可