vue 项目优化之CDN引入

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.最后删除之前引用的文件