vue项目优化-使用cdn瘦身

一般开发vue项目时，都会通过npm install命令下载相应的依赖到本地以供使用，但是会使打包时间长，增加代码体积之外，如果首页加载模块较多，会拉长首页加载时间，但是通过cdn引入vue、vue-router等，可以分别加载这些模块，减少带宽。

使用方式：

1、先在index.html中引入

<!-- 使用cdn外链依赖-->

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>

<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>

<script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>

<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

2、在修改build/webpack.base.conf.js文件

module.exports = {
 externals: {
 'vue': 'Vue', // 左侧vue是我们自己引入时候要用的，右侧是开发依赖库的主人定义的不能修改
 'vue-router': 'VueRouter',
 'vuex': 'Vuex',
 'axios': 'axios',
 }
}

3、main.js中

// import Vue from 'vue'

// import Router from 'vue-router'

//Vue.use(vue) 注意：如果你都router 是在src/router/index.js中定义的，这样写会报vue-router is not defined； 我的文件路径是这样的

解决方案是：

1、在src/router/index.js中：

const router = new VueRouter({ routes })

export default router;

2.在main.js中引入

import indexRouter from './router/index.js';

并在vue 实例中

new Vue({

router:indexRouter,

store: store,

render: function (h) {

return h(App)

}

}).$mount('#app'); 运行一下就会发现vue、vue-router是通过cdn加载的。

你可以看看你的vuex、vue-router、axios也是从通过cdn外链依赖引入的。

转载于:https://my.oschina.net/u/4019503/blog/3027537