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>
-
之后正常使用即可