vue 项目优化之CDN引入
提示:以下是本篇文章正文内容,下面案例可供参考
1.资源引入
把不常改变的库放到index.html中,通过cdn引入,比如下面这样:
<!-- 引入Vue.js -->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<!-- 引入vuex.js -->
<script src="https://cdn.bootcss.com/vuex/3.0.0/vuex.min.js"></script>
<!-- 引入vue-router -->
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<!-- 引入组件库 -->
<script src="https://cdn.bootcss.com/element-ui/2.13.1/index.js"></script>
<link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
2.webpack配置
在bulid/webpack.base.conf.js文件中,增加externals,将引用的外部模块导入,build的时候不打包,如下:
externals:{
'vue':'Vue',
'element-ui':'ELEMENT',
'vue-router':'VueRouter ',
'vuex':'Vuex'
}
3.删除之前的引用
1、在main.js中去掉import和vue.use(xxx)
2.在main.js中之前对Element ui 的引用进行修改
修改之前
修改之后
3.在router的index.js中去掉import
注意:new Router要改为new VueRouter
4.在store的index.js中去掉import
5.最后删除之前引用的文件