vue-cli3.0用cdn引入element-ui

﹏ヽ暗。殇╰゛Y 2023-06-17 04:57 31阅读 0赞

一般项目编写完成，打包的文件都挺大的，所以吧那些常用不会改变的采用cdn引入，减小包的体积，本例子使用的是vue-cli3.0，先在vue.config.js配置externals

  1. config.externals = { 
  2.       Vue: "Vue",
  3.       Vuex: "Vuex",
  4.       "element-ui": "ELEMENT",
  5.       moment: 'moment',
  6.       echarts: 'echarts'
  7.     }

在index.html中加入

  1. <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  2.   <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
  3.   <link href="https://cdn.bootcss.com/element-ui/2.4.5/theme-chalk/index.css" rel="stylesheet">
  4.   <script src="https://cdn.bootcss.com/element-ui/2.4.5/index.js"></script>
  5.   <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
  6.   <script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>

将 import xxx from ‘xxx’去除，这里的xxx代指你要用cdn引入的，上面已经完成，如果你要使用element-ui的Message模块，使用如下，上面的external一定要按照 “element-ui”: “ELEMENT”的写法，要用模块直接ELEMENT点出来就行

  1. ELEMENT.Message.error('成功'); // ELEMENT成为全局变量 一定要按照上面的写法 "element-ui": "ELEMENT"

发表评论

表情：
评论列表 （有 0 条评论，31人围观）

还没有评论，来说两句吧...

相关阅读