项目下载地址vue-cli多页面多路由项目示例:vue + webpack + vue-router + vuex +模拟+ axios
<强>使用
这是一个项目模板vue-cli。
github上找到某大神的一个基于vue-cli模板的vueAdmin后台管理的模板,根据项目需求改成一个多页面多路由的vue项目。
PC端:后台管理页面,单独的页面入口,单独的路由。
移动端:业务展示页面,单独的页面入口,单独的路由。
踩了无数的坑,终于是初见效果了,随后继续优化更新
<强>
#安装依赖关系
npm安装
#服务与热重载在localhost: 8088
npm运行开发
#与缩小建立生产
npm运行构建
之前
使用Nginx服务器进行访问,地址如下:
PC端http://localhost/modules/index.html
移动应用http://localhost/modules/index.html
<强>多页面配置
vue2.0版本多页面入口,是由webpack配置来完成的,我的项目文件结构如下
webpack
|——构建
| - - -配置
| - - -距离
| - - -路线路由
| - - - src
| - - - api axios请求
|——资产资源
|——常见的公共js资源目录
| - - -制造组件
| - - -模块各个模块
| - - -指数指数模块
| - - -视图组件
| - - - index . html
|——-index.js
|——-index.vue
| - - -手机电话模块
|——-phone.html
|——-phone.js
|——-phone.vue
| - - -电话组件
模块下为多个页面入口,文件名称保持一致,如:
模块
| - - -指数
| - - - index . html
|——-index.js
。vue文件名称任意。
原则上这些文件名称都可以随意定,但由于下面入口入口函数的限定,换成其他名字可以会找不到。如果想要起其他文件名,请相应修改getMultiEntry()函数。
<强> until.js
until.js中添加getMultiEntry(),依赖水珠插件,需要提前下载好,until.js开始引入
//获取多级的入口文件
出口。getMultiEntry=函数(globPath) {
var条目={},
basename tmp,路径名;
glob.sync (globPath)。forEach(函数(条目){
basename=路径。:条目,path.extname(条目));
tmp=entry.split (“/? .splice (4);
var pathsrc=https://www.yisu.com/zixun/tmp [0] +‘/? tmp [1];
如果(tmp [0]==皊rc”) {
pathsrc=https://www.yisu.com/zixun/tmp [1];
}//console.log (pathsrc)
路径名=pathsrc +‘/? basename;//正确输出js和html的路径
条目(路径)=条目;//console.log(路径名+“- - - - - - - - - - - -”+入口);
})；
返回条目;
}
之前
<强> ~ \制造\ webpack.base.conf.js
找到条目,添加多入口
条目:条目,
运行,编译的时候每一个入口都会对应一个块。PS:终于明白这个区块的含义了/(ㄒoㄒ)/~ ~
<强> ~ \制造\ webpack.dev.conf.js
文末添加以下配置:
var=utils.getMultiEntry页面(“。/src/? config.moduleName +“/* */* . html”);
(var路径名的页){//配置生成的html文件,定义路径等
配置={var
文件名:路径名+“html”,
模板:页面(路径),//模板路径
块:[路径名,“供应商”,“清单”),//每个html引用的js模块
注射:真//js插入位置
}；//需要生成几个html文件,就配置几个HtmlWebpackPlugin对象
module.exports.plugins。推动(新HtmlWebpackPlugin(参看));
}
之前
其中配置。moduleName=澳？椤?/p>
<强> ~ \制造\ webpack.prod.conf.js
…//构建生成多页面的HtmlWebpackPlugin配置,主要是循环生成
var=utils.getMultiEntry页面(“。/src/? config.moduleName +“/* */* . html”);
(var路径名的页){
配置={var
文件名:路径名+“html”,
模板:页面(路径),//模板路径
块(“供应商”,路径名):,//每个html引用的js模块
注射:真的,//js插入位置
散列:真
}；
webpackConfig.plugins。推动(新HtmlWebpackPlugin(参看));
}
模块。出口=webpackConfig
