公司之前有个项目需求，是建立一个商城平台，每位商家都可以选择不同的前端模板，当用户打开商城时，根据商家id获得模板名称，根据模板名称加载不同的商城模板。
我分析了一下需求，这等于多套商城，一个入口，有点难度。刚开始我想把返回模板的操作放在后端处理，一个模板一个单页项目，根据模板名返回不同文件夹下的index.html.
但是仔细想想，如果日后要改前端的底层，岂不是要每个项目改一次？这个工作量太大了。不如尝试一下把多套模板写在一个项目里。
由于最近在用vue感觉不错，所以首先想到的是vue
我们一步步来尝试
用vue-cli新建一个项目
vue init webpack vue-template
npm i
动手之前先考虑几个问题
1.获取商家模板名称的代码，应该放在什么位置？
2.通过什么方法才可以只加载该模板的页面，只配置该模板的路由？
3.项目结构应该怎样？哪些文件归类到模板文件夹中，哪些文件共用？
首先我们第一个想到的可能是放在main.js里面，毕竟它是入口文件。先写个思路：
QQ截图20171025160237.png
看起来这个逻辑好像是没问题，但其实是行不通的。
因为vue-router每一个路由对应的组件在webpack打包时必须确定，也就是说，你不能写这样的代码：
//错误的写法
if(tmpl=='tmpl1'){
import routes from './Tmpls/Tmpl1/router'
}else{
import routes from './Tmpls/Tmpl2/router'
}
即使你用vue-router的动态添加路由的方法addRoutes()也是不行的。
//错误
router.addRoutes([
{
path:'/home',
component:resolve=>require('./Tmpls/'+tmplName+'/Index'，resolve)
}])
就连这样也不行
var tmpl1={
home:resolve=>require('./Tmpls/tmpl1/Index',resolve)
}
var tmpl2={
home:resolve=>require('./Tmpls/tmpl2/Index',resolve)
}
var tmpls={
tmpl1:tmpl1,
tmpl2:tmpl2
}
getTmpl(function(tmpl){
router.addRoutes([
{
path:'/home',
component:tmpls[tmpl].home
}])
})
addRoutes这个方法，文档只是一笔带过，说是传递router配置作为参数。经过测试，可以说，凡是在路由配置的component里存在变量，即认为打包的组件不确定，通通是不行的。
经过尝试，如果保留这样的数组结构，动态添加路由是ok的，比如
var routes=[{
path: '/home',
component: resolve=>require([./Tmpls/tmpl1/Index],resovle)
}]
getTmpl(function(tmpl){
if(tmpl=='tmpl1'){
router.addRoutes(routes)
}
})
因此，这样的代码是行得通的
（未完待续）
网友评论