vite+ts+vue3项目(vite.config.ts配置)

vite.config.ts文件的相关配置

import vue from "@vitejs/plugin-vue";
import { type UserConfig, type ConfigEnv, loadEnv, defineConfig } from "vite";

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

/** 参考Vite官方配置: https://cn.vitejs.dev/config */
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  const env = loadEnv(mode, process.cwd());
  return {
    //配置别名
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
      },
    },
    // server: {
    //   host: "0.0.0.0",
    //   port: 8888,
    //   open: true,
    //   proxy: {
    //     "/api": {
    //       target: "http://192.168.1.30:8080/east/",
    //       // target: 'http://192.168.1.208:8080/CLOD_INTEGRATION_war_exploded/',
    //       changeOrigin: true,
    //       rewrite: (path) => path.replace(/^\/api/, ""),
    //     },
    //   },
    // },
    server: {
      host: "0.0.0.0", // 允许IP访问
      port: Number(env.VITE_APP_PORT), // 应用端口
      open: true, // 运行是否自动打开浏览器
      proxy: {
        /** 接口代理解决跨域 */
        [env.VITE_APP_BASE_API]: {
          changeOrigin: true,
          target: env.VITE_APP_TARGET_URL, // https://api.xxx.com
          rewrite: (path) =>
            path.replace(
              new RegExp("^" + env.VITE_APP_BASE_API), // ^/api
              env.VITE_APP_TARGET_BASE_API // ""
            ), // 将 /api 开头的请求转发至 target
        },
      },
    },
    // 构建
    build: {
      emptyOutDir: true, // 打包时先清空上一次构建生成的目录
      // outDir: "distp", //指定输出路径
      // assetsDir: "static/img/", // 指定生成静态资源的存放路径
      chunkSizeWarningLimit: 2000, // 消除打包大小超过500kb警告
      minify: "terser", // Vite 2.6.x 以上需要配置 minify: "terser", terserOptions 才能生效
      terserOptions: {
        compress: {
          keep_infinity: true, // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题
          drop_console: true, // 生产环境去除 console
          drop_debugger: true, // 生产环境去除 debugger
        },
        format: {
          comments: false, // 删除注释
        },
      },
      rollupOptions: {
        //体积太大，模块拆分
        output: {
          manualChunks(id) {
            if (id.includes("node_modules")) {
              return id
                .toString()
                .split("node_modules/")[1]
                .split("/")[0]
                .toString();
            }
          },
          // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
          entryFileNames: "static/js/[name]-[hash].js",
          
          // 用于命名代码拆分时创建的共享块的输出命名
          chunkFileNames: "static/js/[name]-[hash].js", //js文件放到一个文件夹
          // chunkFileNames: (chunkInfo) => { // 拆分js到对应模块文件夹
          //   const facadeModuleId = chunkInfo.facadeModuleId
          //     ? chunkInfo.facadeModuleId.split("/")
          //     : [];
          //   const fileName =
          //     facadeModuleId[facadeModuleId.length - 2] || "[name]";
          //   return `static/js/${fileName}/[name].[hash].js`;
          // },

          // 用于输出静态资源的命名，[ext]表示文件扩展名
          // assetFileNames: "static/[ext]/[name]-[hash].[ext]",  //根据拓展名拆分文件夹
          assetFileNames: (assetInfo) => {
            //根据类型拆分文件夹
            var info = assetInfo.name!.split(".");
            var extType = info[info.length - 1];
            if (
              /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/i.test(assetInfo.name!)
            ) {
              extType = "media";
            } else if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(assetInfo.name!)) {
              extType = "img";
            } else if (
              /\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(assetInfo.name!)
            ) {
              extType = "fonts";
            }
            return `static/${extType}/[name]-[hash][extname]`;
          },
        },
      },
    },
    plugins: [
      vue({
        reactivityTransform: true, //props解构保持响应性
      }),
    ],
  };
});

在vite.config.ts文件的同级目录下新建 .env.development文件

## 开发环境

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV='development'

VITE_APP_PORT = 8888

# API请求前缀
VITE_APP_BASE_API = '/api'

# proxy代理配置
# VITE_APP_TARGET_URL = "http://192.168.1.30:8080/east/" # 后端接口
VITE_APP_TARGET_URL = "http://192.168.1.208:8088/CLOD_INTEGRATION_war_exploded/" # 后端接口
VITE_APP_TARGET_BASE_API = ''

在vite.config.ts文件的同级目录下新建 .env.production文件

## 生产环境


VITE_APP_PORT = 8888

# API请求前缀
VITE_APP_BASE_API = '/api'

# proxy代理配置
VITE_APP_TARGET_URL = "http://192.168.1.30:8080/east/"
VITE_APP_TARGET_BASE_API = ''