前言

有时候更新代码到线上域名时，会不知道自己的代码是否已更新到或者是否因为浏览器缓存而导致页面还是旧的，所以我们需要有一个东西去验证是否已经更新。

1. 安装Vite-plugin-html-env

npm i vite-plugin-html-env -D

2. vite.config.ts引入Vite-plugin-html-env并配置

import { defineConfig, loadEnv, ConfigEnv, UserConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import requireTransform from 'vite-plugin-require-transform'
import VitePluginHtmlEnv from 'vite-plugin-html-env'

import path from 'path'

// element-plus按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

const resolve = (dir: string) => path.resolve(__dirname, dir)

export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
	const env = loadEnv(mode, process.cwd())
	return {
		// base: '/',
		resolve: {
			alias: {
				path: 'path-browserify',
				'@': path.resolve(__dirname, './src'),
				'@comp': resolve('src/comp'),
				'@assets': resolve('src/assets'),
				'@api': resolve('src/api'),
				'@utils': resolve('src/utils'),
				'@router': resolve('src/router'),
				'@store': resolve('src/store')
			}
		},
		plugins: [
			vue(),
			requireTransform({ fileRegex: /.ts$|.tsx$|.vue$/ }),
			AutoImport({
				resolvers: [ElementPlusResolver()]
			}),
			Components({
				resolvers: [ElementPlusResolver()]
			}),
			VitePluginHtmlEnv({
				compiler: true
			})
		],
		build: {
			minify: 'terser',
			terserOptions: {
				compress: {
					drop_console: true,
					drop_debugger: true
				}
			},
			rollupOptions: {
				output: {
					chunkFileNames: 'js/[name]-[hash].js',
					entryFileNames: 'js/[name]-[hash].js',
					assetFileNames: '[ext]/[name]-[hash].[ext]'
				}
			}
		},
		server: {
			proxy: {
				'/api': {
					target: 'http://127.0.0.1:8080',
					changeOrigin: true,
					rewrite: path => path.replace(/^\/api/, '')
				}
			}
		}
		// test: {
		// 	globals: true,
		// 	environment: 'jsdom'
		// }
	}
})