Vue 一个项目实现多个入口文件打包（单页面打包）

Fri_

已于 2024-08-08 17:12:04 修改

阅读量246

点赞数 3

文章标签： vue.js javascript 前端

于 2024-06-12 19:02:29 首次发布

本文链接：https://blog.csdn.net/weixin_51878863/article/details/139634345

版权

定义打包变量

在 .env.development 和 .env.production 文件中定义打包变量。我这里需要打包为两个入口文件，代码如下：

# 需要打包的页面  打包单页面填页面名称JsonData 打包全部all

VITE_BUILD_PAGE = 'all'
# VITE_BUILD_PAGE = 'JsonData'

设置路由白名单

在 permission.js 文件中设置，代码如下：

let whiteList = []
const setWhiteList = () => {
  let buildPage = import.meta.env.VITE_BUILD_PAGE
  if(buildPage === 'all') {
    whiteList = ['/login', '/landing', '/error', '/notfound', '/access','/StructureSetting','/DBList'];
  } else {
    whiteList = ['/', '/error', '/notfound'];
  }
}
setWhiteList()

路由文件处理

在 router/index.vue 中分别做处理。

// allRoutes 是所有路由，jsonDataRoutes 是 jsonData 打包需要的路由
const setRouter = () => {
  let buildPage = import.meta.env.VITE_BUILD_PAGE
  if(buildPage === 'all') {
    return
  } else {
    allRoutes = []
    let arr = []
    jsonDataRoutes.map((v, i) => {
      if(v.path) {
        let buildPagePath = '/' + buildPage
        if(v.path === '/error' || v.path === '/:pathMatch(.*)*' || v.path === buildPagePath) {
          if(v.path === buildPagePath) {
            v.path = '/'
          }
          arr.push(v)
        } else {
          return
        }
      }
    })
    jsonDataRoutes= arr
  }
}
setRouter()

export const copyAllRoutes = allRoutes;
export const copyJsonDataRoutes = jsonDataRoutes;