介绍

这个插件可以将源码中的一些 "特殊字符串" 替换为想要的值(只在打包的时候执行), 这个非常有用, 有时候需要在调试控制台中输出一些打包信息, 或者在某些 API 中返回 package.json 文件中的内容

安装

npm i vite-plugin-replace -D

配置

vite.config.js

import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
import { defineConfig } from 'vite';
import { replaceCodePlugin } from "vite-plugin-replace";
import pkgJson from "./package.json";
import dayjs from 'dayjs' // 注意: 请先安装 dayjs

// 将源码中的 from 替换为 to
const replacements = [
  {
    from: "__BUILD_TIME__",
    to: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  },
  {
    from: "__BUILD_VERSION__",
    to: pkgJson.version,
  },
]

export default defineConfig({
  plugins: [vue(), replaceCodePlugin({ replacements })],
});

使用

// src/utils.js
export const version = '__BUILD_VERSION__';

// src/App.vue
import { version } from "./utils";
console.log(version);