vue-cli实现多页面多路由
2017-07-05 09:28
681 查看
项目下载地址 vue-cli多页面多路由项目示例
github上找到某大神的一个基于vue-cli模板的vueAdmin后台管理的模板,根据项目需求改成一个多页面多路由的vue项目。
PC端:后台管理页面,单独的页面入口,单独的路由。
移动端:业务展示页面,单独的页面入口,单独的路由。
踩了无数的坑,终于是初见效果了,随后继续优化更新
使用Nginx服务器进行访问,地址如下:
PC端 http://localhost/modules/index.html
移动APP http://localhost/modules/index.html
modules下为多个页面入口,文件名称保持一致,如:
.vue文件名称任意。
原则上这些文件名称都可以随意定,但由于下面entry入口函数的限定,换成其他名字可以会找不到。如果想要起其他文件名,请相应修改getMultiEntry()函数。
运行、编译的时候每一个入口都会对应一个Chunk。 PS:终于明白这个chunk的含义了/(ㄒoㄒ)/~~
其中
其中
至此,多页面的配置已经完成。访问地址为:
index : http://localhost:8088/modules/index.html
phone : http://localhost:8088/modules/phone.html
vue+
webpack+
vue-router+
vuex+
mock+
axios
Usage
This is a project template for vue-cli.github上找到某大神的一个基于vue-cli模板的vueAdmin后台管理的模板,根据项目需求改成一个多页面多路由的vue项目。
PC端:后台管理页面,单独的页面入口,单独的路由。
移动端:业务展示页面,单独的页面入口,单独的路由。
踩了无数的坑,终于是初见效果了,随后继续优化更新
Install
# install dependencies npm install # serve with hot reload at localhost:8088 npm run dev # build for production with minification npm run build
使用Nginx服务器进行访问,地址如下:
PC端 http://localhost/modules/index.html
移动APP http://localhost/modules/index.html
多页面配置
vue2.0版本多页面入口,是由webpack配置来完成的,我的项目文件结构如下webpack |---build |---config |---dist |---route 路由 |---src |---api axios请求 |---assets 资源 |---common 公共js资源目录 |---components组件 |---modules各个模块 |---index index模块 |---views 组件 |---index.html |---index.js |---index.vue |---phone phone模块 |---phone.html |---phone.js |---phone.vue |---phone 组件
modules下为多个页面入口,文件名称保持一致,如:
modules |---index |---index.html |---index.js
.vue文件名称任意。
原则上这些文件名称都可以随意定,但由于下面entry入口函数的限定,换成其他名字可以会找不到。如果想要起其他文件名,请相应修改getMultiEntry()函数。
until.js
until.js中添加getMultiEntry(),依赖 glob插件,需要提前下载好,until.js开始引入//获取多级的入口文件 exports.getMultiEntry = function (globPath) { var entries = {}, basename, tmp, pathname; glob.sync(globPath).forEach(function (entry) { basename = path.basename(entry, path.extname(entry)); tmp = entry.split('/').splice(-4); var pathsrc = tmp[0]+'/'+tmp[1]; if( tmp[0] == 'src' ){ pathsrc = tmp[1]; } //console.log(pathsrc) pathname = pathsrc + '/' + basename; // 正确输出js和html的路径 entries[pathname] = entry; //console.log(pathname+'-----------'+entry); }); return entries; }
~\build\webpack.base.conf.js
找到entry,添加多入口entry:entries,
运行、编译的时候每一个入口都会对应一个Chunk。 PS:终于明白这个chunk的含义了/(ㄒoㄒ)/~~
~\build\webpack.dev.conf.js
文末添加以下配置:var pages = utils.getMultiEntry('./src/'+config.moduleName+'/**/*.html'); for (var pathname in pages) { // 配置生成的html文件,定义路径等 var conf = { filename: pathname + '.html', template: pages[pathname], // 模板路径 chunks: [pathname, 'vendors', 'manifest'], // 每个html引用的js模块 inject: true // js插入位置 }; // 需要生成几个html文件,就配置几个HtmlWebpackPlugin对象 module.exports.plugins.push(new HtmlWebpackPlugin(conf)); }
其中
config.moduleName = 'modules'
~\build\webpack.prod.conf.js
... //构建生成多页面的HtmlWebpackPlugin配置,主要是循环生成 var pages = utils.getMultiEntry('./src/'+config.moduleName+'/**/*.html'); for (var pathname in pages) { var conf = { filename: pathname + '.html', template: pages[pathname], // 模板路径 chunks: ['vendor',pathname], // 每个html引用的js模块 inject: true, // js插入位置 hash:true }; webpackConfig.plugins.push(new HtmlWebpackPlugin(conf)); } module.exports = webpackConfig
其中
config.moduleName = 'modules'
至此,多页面的配置已经完成。访问地址为:
index : http://localhost:8088/modules/index.html
phone : http://localhost:8088/modules/phone.html
Browser Support
Modern browsers and Internet Explorer 10+.snapshots
License
MIT相关文章推荐
- vue-cli实现多页面多路由的示例代码
- Vue笔记3 vue-cli单页面应用与路由设置
- Vue-cli中为单独页面设置背景色的实现方法
- vue通过 vue.mixin(混合)实现 任意页面记录滚动条位置(路由router.query参数一致) 并跳转到上次的位置
- vue-cli 路由 实现类似tab切换效果(vue 2.0)
- vue-router实现单页面路由原理
- Vue模拟数据,实现路由进入商品详情页面
- Vue实现前台页面组件化路由跳转
- Vue模拟数据,实现路由进入商品详情页面的示例
- vue 路由页面之间实现用手指进行滑动的方法
- vue通过路由实现页面刷新的方法
- 基于vue-cli的vue项目之路由6--重定向2-----页面初始化重定向
- vue-cli创建的项目,配置多页面的实现方法
- vue-cli+webpack实现多页面应用的配置
- vue-cli + webpack 多页面实例应用
- vue-cli中实现全选、单选计算总价格(vue2.0)
- 使用Vue-Router 2实现路由功能
- vue2笔记 ― vue-router路由懒加载的实现
- vue-router同一路由地址同页面切换无效解决
- vue-cli的webpack项目,webpack-hot-middleware热加载热部署有时候不刷新页面