因为我们公司的项目是多页面应用,不同于传统单页面应用,一个包就可以了。我们必须要分模块打包,因此特意研究了下webpack,然后整理了一下多页面打包的逻辑。
1.首先,用vue-cli搭好基本的项目结构。
安装vue-cli
npm install --global vue-cli
然后用测试下
vue -V
然后生成项目
vue init webpack hndlBuild
然后这是生成的项目结构
接下来我们对这个结构进行下调整
2. 项目结构调整
由于每个功能的路由也是单独的,因此我们需要单独的路由文件,在src下创建一个页面配置
index.js
// 页面路径配置
import router from '@/page1/router' // 你的页面文件路径
export default {
router
}
你也可以在其中配置其他参数,
然后对main.js进行修改
import Vue from 'vue'
import App from './App'
import config from './pageConfig' //修改了配置的引入方法
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router: config.router, // 这里配置路由
components: { App },
template: '<App/>'
})
然后就是创建对应的页面路径了
接下来就是正常的开发和打包流程
因为webpack打包是按需引入的 所以我们可以在外部直接开发组件,然后多页面引入,这样可以避免把大量时间浪费在同一件事情上。