为了减少vendor.js体积,同时提高webpack打包编译速度,引入cdn外部资源
在index.html引入资源文件:
<!-- 先引入 Vue -->
<!--开发环境-->
<!-- <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script> -->
<!--生产环境-->
<script src="https://cdn.bootcss.com/vue/2.5.16/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/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.0.4/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
在webpack.config.js中配置externals:
module.exports = {
externals: {
'vue': 'Vue',
'vue-router': ‘VueRouter’
'jquery': 'jQuery',
'axio':'axios',
'echarts': 'echarts',
},
...
}
针对使用bootstrap这样的ui库,直接index.html引入cdn文件,不必导入,但是注意版本不同可能导致样式引入错乱。
=>不要引入Vue-Router cdn的全部变量是
VueRouter
=> main.js这里引入进来的是你配置路由的文件路径
import router from './router'
=> 这里引入进来的才是main.js引入进来的路由对象
import Router from 'vue-router'