vue打包会把vue相关的组件打包到一个文件vendor.*.js（*是个随机数）
步骤一 资源引入
vue最外层index.html文件引入资源文
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.5.2/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>
</body>步骤二 添加配置
在bulid/webpack.base.conf.js文件中，增加externals，将引用的外部模块导入，如下：
module.exports = {
entry: {
app: './src/main.js'
},
externals:{
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex':'Vuex'
}
【注意】 externals的key:value不要随便修改，暂时理解为 key是npm安装使用的名称，value为组件对外提供的名称不可随意更改（打开组件源码可见）
步骤三 去掉原有的引用
1.main.js 文件中注释掉vue
// import Vue from 'vue'
2.router--> index.js 文件中注释掉 vue和 vue-router：
// import Vue from 'vue'
// import VueRouter from 'vue-router'
3.修改名vue 使用路由配置为以下
Vue.use(VueRouter)https://blog.xqlee.com/article/514.html
评论
相关文章
vue-router 中 routers 定义写法,讨论 require 的使用与否首先上 routerindex.jsimport Vue from 'vue'import Router f...
Vue 如何返回上一页（上一个锚点）//...省略
methods:{
goback:function(){
this.$router.go(-1);//...
在初始化的Vue项目中，我们最先接触到的就是main.js，App.vue，index.html这三个文件，从下面创建的一个空白项目中可以看到：关于三个文件的说明如下：index.html---主页