vue-cli3创建多页面应用

首先用vue-cli3创建工程,我的全局安装了vue-cli2,又不想卸载掉;所以新建了一个文件夹安装vue-cli3;然后在该文件夹下创建工程;

同时安装vue-cli2和vue-cli3参考:https://segmentfault.com/a/1190000020487946

工程创建好后,默认不带vue.config.js文件

vue-cli3创建多页面应用

新建两个文件夹,users和roles,相当于两个单页面应用工程一样;里面分别新建对应的js,vue文件,有需要也可以添加对应的route,vuex,引入Element-UI等;

vue-cli3创建多页面应用

新建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官方提供的可配置字段

vue-cli3创建多页面应用

按照上面的配置,在public文件夹下添加user.html,为了方便,我把入口改成了字符串格式,里面的js,vue文件都用user来命名

user.js和原先单页面应用的mian.js是一样的,user.vue和之前的app.vue也是一样的;也可以有自己的嵌套路由;

user.js内容:

vue-cli3创建多页面应用

user.vue内容:

vue-cli3创建多页面应用

然后在public文件夹中添加user.html

vue-cli3创建多页面应用

同样的,roles里面目录结构也是一样的,代码构成也类似;

npm run serve启动页面后,页面显示正常如图所示:

vue-cli3创建多页面应用

vue-cli3创建多页面应用

 

npm run build将页面打包后预览dist里面的文件:

vue-cli3创建多页面应用

 

vue-cli3创建多页面应用

上一篇:nrm 源管理工具


下一篇:Redis 基本事务操作