vue-cli实现多页面多路由的示例代码

2020-11-27 来源：爱够旅游网

项目下载地址 vue-cli多页面多路由项目示例：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实现多页面多路由的示例代码