首先用vue-cli3创建工程,我的全局安装了vue-cli2,又不想卸载掉;所以新建了一个文件夹安装vue-cli3;然后在该文件夹下创建工程;
同时安装vue-cli2和vue-cli3参考:https://segmentfault.com/a/1190000020487946
工程创建好后,默认不带vue.config.js文件
新建两个文件夹,users和roles,相当于两个单页面应用工程一样;里面分别新建对应的js,vue文件,有需要也可以添加对应的route,vuex,引入Element-UI等;
新建vue.config.js,将下列参数加进去,其中pages字段就是多页面应用的关键配置字段
module.exports = { publicPath:process.env.NODE_ENV===‘production‘?‘./‘:‘/‘, pages:{ users:‘src/pages/users/users.js‘, roles:‘src/pages/roles/roles.js‘, }, configureWebpack:{ name:‘多页面应用‘ } }
其中pages字段是vuecli官方提供的可配置字段
按照上面的配置,在public文件夹下添加user.html,为了方便,我把入口改成了字符串格式,里面的js,vue文件都用user来命名
user.js和原先单页面应用的mian.js是一样的,user.vue和之前的app.vue也是一样的;也可以有自己的嵌套路由;
user.js内容:
user.vue内容:
然后在public文件夹中添加user.html
同样的,roles里面目录结构也是一样的,代码构成也类似;
npm run serve启动页面后,页面显示正常如图所示:
npm run build将页面打包后预览dist里面的文件: