Vite+Vue3增加版本号记录(验证线上环境是否已更新到最新版本)

原创已于 2022-11-01 10:11:19 修改 · 4.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #typescript

于 2022-10-31 14:31:26 首次发布

博客介绍了使用Vite-plugin-html-env验证代码是否更新到线上域名的方法。包括安装插件、在vite.config.ts中引入并配置、添加对应环境配置文件、增加VUE_APP_Version变量、在index.html添加变量、在package.json添加打包命令，最后运行对应打包命令查看版本号。

前言

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

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'
		// }
	}
})