web/vite.config.ts

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

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vite.dev/config/
export default defineConfig(({ command, mode }) => {
  console.log(command, mode)
  const env = loadEnv(mode, process.cwd(), '')
  console.log(env.NODE_ENV)
  return {
    /* 共享 */
    // 根目录
    // root:''
    // 基础
    // base:'',
    base: `/${env.VITE_BASE_URL}`,
    // 模式 development,production
    // mode:'',
    // 定义全局常量
    // define:{},
    // 插件
    plugins: [
      vue(),
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
    // 普通静态资产，此目录中的文件在dev期间提供，并在build中复制到根目录，并且时钟按原样提供或复制，不进行转换  string,false
    // publicDir: false,
    //保存缓存文件，
    // cacheDir: '',
    /* 服务器 */
    server: {
      // 服务器主机，侦听ip地址
      host: '0.0.0.0',
      // 服务器端口
      port: 8001,
      // 端口已在使用中，設置為exit,不尝试下一个可用端口
      // strictPort:false,
      // 启用安全证书，@vitejs/plugin-basic-ssl ，可以自己创建并缓存签名证书，可以创建自己的证书
      // https:{},
      // 在服务器启动时自动在浏览器中打开应用程序。当值为字符串时，它将用作 URL 的路径名。如果你想在你喜欢的特定浏览器中打开服务器
      // open:''
      // 服务器
      proxy: {
        [env.VITE_REQUEST_BASE]: {
          target: 'http://127.0.0.1:9000',
          ws: false,
          changeOrigin: true,
          // rewrite: (path) => path.replace(new RegExp(`^/api`), ''),
        },
      },
      // 为开发服务器配置 CORS。默认情况下，此选项处于启用状态，并允许任何源。
      // cors:false,
      // 指定服务器响应标头
      // headers:'',
    },
    /* 构建选项 */
    build: {
      outDir: env.VITE_BASE_URL
      // 最终捆绑包的浏览器兼容性目标。默认值是 Vite 特殊值
      // target:'',
      // 预加载
      // module:'',
      // 是否自动注入模块预加载polyfill
      // polyfillModule:false,
      // 指定输出目录
      // outDir:'',
      // 指定要将生产厂的资产签到在
      // assets: '',
      // 小于此阈值的导入或引用的资源将被内联为 base64 URL，以避免额外的 http 请求。设置为 可完全禁用内联。
      // assetsInlineLimit:0,
      // 启用/禁用 CSS 代码拆分。启用后，在异步 JS 块中导入的 CSS 将保留为块，并在提取块时一起提取。
      // cssCodeSplit:false,
      // 此选项允许用户为 CSS 缩小设置与用于 JavaScript 转译的目标不同的浏览器目标
      // cssTarget:'',
      // 此选项允许用户专门覆盖 CSS 缩小，而不是默认为 ，因此您可以分别为 JS 和 CSS 配置缩小
      // cssMinify:false,
      // 生成生产源映射。如果 ，将创建一个单独的 sourcemap 文件。如果 ，则 sourcemap 将作为数据 URI 附加到生成的输出文件中。 除了捆绑文件中相应的 SourceMap 注释被禁止显示之外，其工作方式与此类似
      // source:false,
      // 直接自定义底层 Rollup bundle。这与可以从 Rollup 配置文件导出的选项相同，并且将与 Vite 的内部 Rollup 选项合并
      // rollup:{},
    },
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
  }
})