项目配置项

用于修改项目的配色、布局、缓存、多语言、组件默认配置

环境变量配置

项目的环境变量配置位于项目根目录下的 .env、.env.development、.env.production

具体可以参考 Vite 文档

  1. .env                # 在所有的环境中被载入
  2. .env.local          # 在所有的环境中被载入，但会被 git 忽略
  3. .env.[mode]         # 只在指定的模式中被载入
  4. .env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

::: tip 温馨提醒

  • 只有以 VITE_ 开头的变量会被嵌入到客户端侧的包中，你可以项目代码中这样访问它们：

    1. console.log(import.meta.env.VITE_PROT);

  • 以 VITE_GLOB_* 开头的的变量，在打包的时候，会被加入_app.config.js配置文件当中.

:::

配置项说明

.env

所有环境适用

  1. # 端口号
  2. VITE_PORT=3100
  3. # 网站标题
  4. VITE_GLOB_APP_TITLE=Naive Ui Admin
  5. # 简称，用于配置文件名字 不要出现空格、数字开头等特殊字符
  6. VITE_GLOB_APP_SHORT_NAME=naive_ui_admin

.env.development

开发环境适用

  1. # 是否开启mock数据，关闭时需要自行对接后台接口
  2. VITE_USE_MOCK=true
  3. # 资源公共路径,需要以 /开头和结尾
  4. VITE_PUBLIC_PATH=/
  5. # 是否删除Console.log
  6. VITE_DROP_CONSOLE=false
  7. # 接口地址
  8. # 如果没有跨域问题，直接在这里配置即可
  9. VITE_GLOB_API_URL=/api
  10. # 图片上传地址
  11. VITE_GLOB_UPLOAD_URL=/upload
  12. # 图片前缀地址
  13. VITE_GLOB_IMG_URL=/
  14. # 接口前缀
  15. VITE_GLOB_API_URL_PREFIX=

::: warning 注意

这里配置的 VITE_PROXY 以及 VITE_GLOB_API_URL, /api 需要是唯一的，不要和接口有的名字冲突

如果你的接口是 http://localhost:3000/api 之类的，请考虑将 VITE_GLOB_API_URL=/xxxx 换成别的名字

:::

.env.production

生产环境适用

  1. # 是否开启mock
  2. VITE_USE_MOCK=true
  3. # 接口地址 可以由nginx做转发或者直接写实际地址
  4. VITE_GLOB_API_URL=/api
  5. # 文件上传地址 可以由nginx做转发或者直接写实际地址
  6. VITE_GLOB_UPLOAD_URL=/upload
  7. # 接口地址前缀，有些系统所有接口地址都有前缀，可以在这里统一加，方便切换
  8. VITE_GLOB_API_URL_PREFIX=
  9. # 是否删除Console.log
  10. VITE_DROP_CONSOLE=true
  11. # 资源公共路径,需要以 / 开头和结尾
  12. VITE_PUBLIC_PATH=/

生产环境动态配置

说明

当执行yarn build构建项目之后，会自动生成 _app.config.js 文件并插入 index.html。

注意: 开发环境不会生成

  1. // _app.config.js
  2. // 变量名命名规则  __PRODUCTION__xxx_CONF__   xxx：为.env配置的VITE_GLOB_APP_SHORT_NAME
  3. window.__PRODUCTION__VUE_VBEN_ADMIN__CONF__ = {
  4.   VITE_GLOB_APP_TITLE: 'Naive Ui Admin',
  5.   VITE_GLOB_APP_SHORT_NAME: 'naive-ui-admin',
  6.   VITE_GLOB_API_URL: '/app',
  7.   VITE_GLOB_API_URL_PREFIX: '/',
  8.   VITE_GLOB_UPLOAD_URL: '/upload',
  9. };

作用

_app.config.js 用于项目在打包后，需要动态修改配置的需求，如接口地址。不用重新进行打包，可在打包后修改 /dist/_app.config.js 内的变量，刷新即可更新代码内的局部变量。

如何获取全局变量

想要获取 _app.config.js 内的变量，可以使用 src/hooks/setting/index.ts 提供的函数来进行获取

如何新增(新增一个可动态修改的配置项)

  1. 首先在 .env 或者对应的开发环境配置文件内，新增需要可动态配置的变量，需要以 VITE_GLOB_开头

  2. VITE_GLOB_ 开头的变量会自动加入环境变量，通过在 src/types/config.d.ts 内修改 GlobEnvConfig 和 GlobConfig 两个环境变量的值来定义新添加的类型

  3. useGlobSetting 函数中添加刚新增的返回值即可

  1. const {
  2.   VITE_GLOB_APP_TITLE,
  3.   VITE_GLOB_API_URL,
  4.   VITE_GLOB_APP_SHORT_NAME,
  5.   VITE_GLOB_API_URL_PREFIX,
  6.   VITE_GLOB_UPLOAD_URL,
  7. } = ENV;
  9. export const useGlobSetting = (): SettingWrap => {
  10.   // Take global configuration
  11.   const glob: Readonly<GlobConfig> = {
  12.     title: VITE_GLOB_APP_TITLE,
  13.     apiUrl: VITE_GLOB_API_URL,
  14.     shortName: VITE_GLOB_APP_SHORT_NAME,
  15.     urlPrefix: VITE_GLOB_API_URL_PREFIX,
  16.     uploadUrl: VITE_GLOB_UPLOAD_URL
  17.   };
  18.   return glob as Readonly<GlobConfig>;
  19. };

项目配置

::: warning

项目配置文件用于配置项目内展示的内容、布局、文本等效果，该配置，暂时没有存于localStorage中。刷新则恢复初始值。

:::

src/settings/projectSetting.ts

  1. const setting = {
  2.     //导航模式 vertical 左侧菜单模式 horizontal 顶部菜单模式
  3.     navMode: 'vertical',
  4.     //导航风格 dark 暗色侧边栏 light 白色侧边栏 header-dark 暗色顶栏
  5.     navTheme: 'dark',
  6.     //顶部
  7.     headerSetting: {
  8.         //背景色
  9.         bgColor: '#fff',
  10.         //固定顶部
  11.         fixed: true,
  12.         //显示重载按钮
  13.         isReload: true,
  14.     },
  15.     //页脚
  16.     showFooter: true,
  17.     //多标签
  18.     multiTabsSetting: {
  19.         //背景色
  20.         bgColor: '#fff',
  21.         //是否显示
  22.         show: true,
  23.         //固定多标签
  24.         fixed: true,
  25.     },
  26.     //菜单
  27.     menuSetting: {
  28.         //最小宽度
  29.         minMenuWidth: 64,
  30.         //菜单宽度
  31.         menuWidth: 200,
  32.         //固定菜单
  33.         fixed: true,
  34.     },
  35.     //面包屑
  36.     crumbsSetting: {
  37.         //是否显示
  38.         show: true,
  39.         //显示图标
  40.         showIcon: false,
  41.     },
  42.     //菜单权限模式 FIXED 前端固定路由  BACK 动态获取
  43.     permissionMode: 'FIXED',
  44. };
  45. export default setting;

组件配置

src/settings/componentSetting.ts

  1. export default {
  2.     table: {
  3.         apiSetting: {
  4.             // 当前页的字段名
  5.             pageField: 'page',
  6.             // 每页数量字段名
  7.             sizeField: 'pageSize',
  8.             // 接口返回的数据字段名
  9.             listField: 'list',
  10.             // 接口返回总页数字段名
  11.             totalField: 'pageCount',
  12.         },
  13.         //默认分页数量
  14.         defaultPageSize: 10,
  15.         //可切换每页数量集合
  16.         pageSizes: [10, 20, 30, 40, 50],
  17.     },
  18.     upload: {
  19.         //考虑接口规范不同
  20.         apiSetting: {
  21.             // 集合字段名
  22.             infoField: 'data',
  23.             // 图片地址字段名
  24.             imgField: 'photo',
  25.         },
  26.         //最大上传图片大小
  27.         maxSize: 2,
  28.         //图片上传类型
  29.         fileType: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'image/svg+xml'],
  30.     },
  31. };

主题配置

src/settings/designSetting.ts

  1. // app theme preset color
  2. export const appThemeList: string[] = [
  3.     '#2d8cf0',
  4.     '#0960bd',
  5.     '#0084f4',
  6.     '#009688',
  7.     '#536dfe',
  8.     '#ff5c93',
  9.     '#ee4f12',
  10.     '#0096c7',
  11.     '#9c27b0',
  12.     '#ff9800',
  13.     '#FF3D68',
  14.     '#00C1D4',
  15.     '#71EFA3',
  16.     '#171010',
  17.     '#78DEC7',
  18.     '#1768AC',
  19.     '#FB9300',
  20.     '#FC5404',
  21. ];
  23. const setting = {
  24.     //深色主题
  25.     darkTheme: false,
  26.     //系统主题色
  27.     appTheme: '#2d8cf0',
  28.     //系统内置主题色列表
  29.     appThemeList,
  30. };
  32. export default setting;