admin管理员组文章数量:1633739
如题,目前有两种尝试方法:
目录
- 一.配置多个环境变量控制路由,主题和js改动
- 二.配置多个入口文件
一.配置多个环境变量控制路由,主题和js改动
适用于:同一逻辑(登录,权限,基础功能)下,只有主题和部分页面不同,大部分页面相同
- 配置环境变量.env.zhejiang(开发环境).env.zhejiang.build(生产环境)
- 修改package.json,新增页面脚本
- 修改
vue.config.js
中的pattern值
- 我们可以将有关多页面的相关配置信息放在某个常量文件中
通过Vue.prototype.$constant = constant
挂载到vue上,页面中使用this.$constant即可进行访问 - 修改
router/index.js
对引入的路由配置进行按页面配置变量进行过滤
/* 文件引入 */
const files = require.context('.', false, /\.js$/)
const routeList = []
files.keys().forEach(key => {
if (key === './index.js') return
/**
* 根据省份过滤路由
* @param routes
* @returns {*}
*/
const getRoutes = (routes) => {
return routes.filter(r => {
let result = true
if (r.meta) {
if (r.meta.showInProvince) { // 只在某些省份环境下显示
result = r.meta.showInProvince.includes(constant['COMMON|REGION_MAP'].region)
}
if (r.meta.hiddenInProvince) { // 在某些省份环境下不显示
result = !r.meta.hiddenInProvince.includes(constant['COMMON|REGION_MAP'].region)
}
}
if (result && r.children && r.children.length) {
r.children = getRoutes(r.children)
}
return result
})
}
const routes = getRoutes(files(key).default.routes)
routeList.push({
path: files(key).default.base,
component: MainLayout,
children: routes
})
})
meta中showInProvince为只在某些站点才显示的路由,hiddenInProvince为在某些站点隐藏的路由
- 将
process.env.VUE_APP_CURRENT_PROVINCE
值放入store中储存或全局使用都行 - 新建一个less变量文件用来对应新入口所需要的主题色
- 在App.vue中添加一个标识当前入口页面的className,用来管理一些特殊样式,比如背景图引入的不同等
- 打包与发布只需依据对应的build命令执行即可
综上,当你可以用环境配置控制你的主题样式,路由文件,以及能在js中访问到此环境变量时,那么基本可以做到环境区分了
二.配置多个入口文件
适用于:大部分页面相同,但每个入口都有自己的一套基础逻辑(登录,权限等等)
- 在src目录下新建pages文件夹,并根据需求建立对应的入口文件夹,依次在文件夹下新建入口js文件,入口template文件,注意文件名要和你的入口一一对应
- 在
vue.config.js
中新增pages多入口配置
const pages = {}
// 配置pages多页面获取当前文件夹下的html和js
glob.sync('./src/pages/*/*.js').forEach(filepath => {
const fileList = filepath.split('/')
const fileName = fileList[fileList.length - 2]
pages[fileName] = {
entry: `src/pages/${fileName}/${fileName}.js`,
// 模板来源
template: `src/pages/${fileName}/${fileName}.html`,
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', fileName]
}
})
利用glob匹配路径文件,entry,template可根据需要自行修改,但要保证能匹配上对应文件
- 如果引用了babel-pollfill还需要在configureWebpack中额外添加一些配置项
Object.keys(config.entry).forEach(v => {
config.entry[v].unshift('babel-polyfill')
})
-
在pages下对应的入口js中引入各页面对应的路由,store
-
也可以在store中配置一个环境变量然后利用第一种方法中的路由过滤方法进行路由配置
-
因为这种方法没有配置环境变量,所以对不同环境的主题区分需要依赖根元素的className进行判断,在App.vue中进行配置
-
新建一个主题文件利用scss,sass或less的函数对主题颜色进行管理
将所有需要有主题变化的className放入theme方法中,通过根元素的不同传入不同的色值来达到改变颜色的目的 -
和第一种方法一样,最终都要将此主题文件在每个vue文件中注入
-
配置完成后不管是运行npm run server还是npm run build都会生成多个.html文件对应不同的入口
-
发布时需要将不用域名指向不同的html文件即可顺利访问
版权声明:本文标题:vue项目多页面,多入口,多路由,多主题解决方案(vuecli3) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1729174383a1188535.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论