项目配置

主要介绍项目配置信息。

环境变量配置

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

.env                # 在所有的环境中被载入
.env.[mode]         # 只在指定的模式中被载入

配置项说明

# 系统拥有者
VITE_APP_OWNER = 'Dony'
# 系统简称名称，用于控住不同产品不同配置使用
VITE_APP_NAME = 'vue3'
# 系统样式的命名空间
VITE_APP_NAME_SPACE='ep'
# 系统中文名称
VITE_APP_NAME_ZH = 'Vue3 模板'


# 项目根目录
VITE_APP_ROOT = '/'
# 项目作为静态资源服务的文件夹名称
VITE_APP_PUBLIC_DIR = 'public'
# 项目logo文件夹地址
VITE_APP_LOGO_DIR = '/images/logo.png'
# 浏览器标签图表文件地址
VITE_APP_FAVICON_DIR = '/favicon.ico'

# 是否启用gzip压缩或brotli压缩
# 可选: gzip | brotli | none
# 如果你需要多种形式，你可以用','来分隔
VITE_APP_BUILD_COMPRESS = 'gzip,brotli'
# 使用压缩时是否删除原始文件，默认为false
VITE_APP_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false

# ===========在不同的env环境文件中配置不同内容(如.env.prod)=============
# 系统的可运行环境
VITE_APP_NODE_ENV = 'production'


# 项目启动端口号
VITE_APP_PROXY_PORT = 9898
# 本地开发代理key
VITE_APP_PROXY_GATEWAY = '/web'
# 本地开发代理或者生产环境要使用的后端接口域名
VITE_APP_BASE_API = 'https://dony.online/api'
# 接口的秘钥
VITE_APP_GAIA_API_KEY = 'd7c5747d-e4a2-4258-85ac-0b3057b7d776'

vite.config文件内容

项目中配置信息，都是在 vite.config 中配置的，不同的模块存放于 scripts 文件夹下面。

import { fileURLToPath, URL } from 'node:url';

import { defineConfig, loadEnv } from 'vite';

import { createBuildConfig } from './scripts/create-build';
import { createCssConfig } from './scripts/create-css';
import { createServerConfig } from './scripts/create-server';
import { createVitePlugins } from './scripts/plugins';

// https://vite.dev/config/
export default defineConfig(({ mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd(), '');
  const viteVisualizer = env.VITE_VISUALIZER === 'true';

  const plugins = createVitePlugins(env, {
    iconDirs: [fileURLToPath(new URL('./src/assets/svg', import.meta.url))],
    customDomId: '__mh__svg__icons__dom__',
    viteVisualizer,
    // eslintPath: fileURLToPath(new URL('./.eslintrc.js', import.meta.url)),
    eslintPath: fileURLToPath(new URL('./node_modules/eslint', import.meta.url)),
  });

  return {
    base: env.VITE_APP_ROOT,
    publicDir: env.VITE_APP_PUBLIC_DIR,
    plugins,
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
      // 类型： string[] 导入时想要省略的扩展名列表。
      extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.mjs'],
    },
    css: createCssConfig(),
    build: createBuildConfig(env),
    server: createServerConfig(env),
  };
});

scripts文件夹下内容

scripts 文件夹下内容主要包含plugins、执行脚本、系统配置文件等内容，请自行到 build 文件目录下查看。