vue项目多页面，多入口，多路由，多主题解决方案（vuecli3）

最新推荐文章于 2024-05-23 17:34:08 发布

AwesomeCPA

最新推荐文章于 2024-05-23 17:34:08 发布

阅读量8.7k

点赞数 3

分类专栏：前端文章标签： vue vue.js

本文链接：https://blog.csdn.net/cpa0701/article/details/105222546

版权

前端专栏收录该内容

78 篇文章 4 订阅

订阅专栏

如题，目前有两种尝试方法：

一.配置多个环境变量控制路由，主题和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文件即可顺利访问