若依：Vue3 + Element Plus + Vite 版本大屏改造

一、参考文档

官网说明文档：plus-doc 

二、改造流程

1、去除登录及路由限制，可直接登入系统

2、页面改造，去除左侧及顶部多余面板（相对于大屏来说），lauout里只保留app-main即可

三、打包修改

1、vite.config.ts加上 “base: `./ `”，解决打包后文件找不到路径的问题

默认引入路径缺少' ./ '

会导致报错：

修改位置：

2、打包后访问index页面报404的问题，修改路由配置

参考：

vite学习笔记_vite 依赖预构建-CSDN博客

Vite + Vue3 + Ts 解决打包生成的index.html页面 显示空白、报资源跨域、找不到资源、404-Page Not Found等错误-CSDN博客

3、动态导入文件，打包后不加载问题解决

vite学习笔记_vite 依赖预构建-CSDN博客

import.meta.globEager 已经弃用，可使用 import.meta.glob('*', { eager: true }) 

 //vite独有动态引入方法，先引入所有，然后再拿到自己需要的
  const tsObj = import.meta.glob("./options/*.ts", { eager: true })
  const file=tsObj[`./options/${url}.ts`]

  //webpack打包的话可用require方法
  require(`@/components/bmp/echarts/options/${url}`)

扩展：图片动态引用，示例如下

const getImage=(url:string)=>{
  const imgObj = import.meta.glob("/src/assets/images/*.svg", { eager: true }) as {[key:string]:{default:string}}
  const img=imgObj[url].default
  return img
}

  const videoList = [
  {
    label: '图片1',
    url: getImage('/src/assets/images/u2502.svg')
  },
  {
    label: '图片2',
    url: getImage('/src/assets/images/u2506.svg')
  }
]