optimize: ♻️ 线上模式是否使用mock;配置环境变量;根据不同环境显示不同端口

.env

@@ -1,8 +1,11 @@
+# 端口号
+VITE_PORT=6262
+
 # 基础请求路径
-VITE_BASE_API="/api"
+VITE_BASE_API=/api
 
 # 模拟请求路径
-VITE_MOCK_BASE_API="/mock"
+VITE_MOCK_BASE_API=/mock
 
 # 线上环境接口地址
 VITE_APP_URL=http://localhost:8800
@@ -19,13 +22,13 @@ VITE_BASE_API_RETRY=5
 # 失败重试时间
 VITE_BASE_API_RETRY_DELAY=3000
 
-# 端口号
-VITE_PORT=6262
-
 # 是否使用CDN加速
 VITE_CDN=true
 
 # 是否启用gzip压缩或brotli压缩（分两种情况，删除原始文件和不删除原始文件）
 # 压缩时不删除原始文件的配置：gzip、brotli、both（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）
 # 压缩时删除原始文件的配置：gzip-clear、brotli-clear、both-clear（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）
-VITE_COMPRESSION="both"
+VITE_COMPRESSION="both"
+
+# 是否启用Mock
+VITE_MOCK_SERVER_ENABLE=true

.env.dev

@@ -1,8 +1,11 @@
+# 端口号
+VITE_PORT=6262
+
 # 基础请求路径
-VITE_BASE_API="/api"
+VITE_BASE_API=/api
 
 # 模拟请求路径
-VITE_MOCK_BASE_API="/mock"
+VITE_MOCK_BASE_API=/mock
 
 # 线上环境接口地址
 VITE_APP_URL=http://localhost:8800
@@ -19,13 +22,13 @@ VITE_BASE_API_RETRY=5
 # 失败重试时间
 VITE_BASE_API_RETRY_DELAY=3000
 
-# 端口号
-VITE_PORT=6262
-
 # 是否使用CDN加速
 VITE_CDN=true
 
 # 是否启用gzip压缩或brotli压缩（分两种情况，删除原始文件和不删除原始文件）
 # 压缩时不删除原始文件的配置：gzip、brotli、both（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）
 # 压缩时删除原始文件的配置：gzip-clear、brotli-clear、both-clear（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）
-VITE_COMPRESSION="both"
+VITE_COMPRESSION="both"
+
+# 是否启用Mock
+VITE_MOCK_SERVER_ENABLE=true

.env.prod

@@ -0,0 +1,34 @@
+# 端口号
+VITE_PORT=80
+
+# 基础请求路径
+VITE_BASE_API=/api
+
+# 模拟请求路径
+VITE_MOCK_BASE_API=/mock
+
+# 线上环境接口地址
+VITE_APP_URL=http://localhost:8800
+
+# 线上环境接口地址
+VITE_APP_MOCK_URL=http://localhost:6262
+
+# 网络请求延迟时间
+VITE_BASE_API_TIMEOUT=15000
+
+# 失败重试次数
+VITE_BASE_API_RETRY=5
+
+# 失败重试时间
+VITE_BASE_API_RETRY_DELAY=3000
+
+# 是否使用CDN加速
+VITE_CDN=true
+
+# 是否启用gzip压缩或brotli压缩（分两种情况，删除原始文件和不删除原始文件）
+# 压缩时不删除原始文件的配置：gzip、brotli、both（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）
+# 压缩时删除原始文件的配置：gzip-clear、brotli-clear、both-clear（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）
+VITE_COMPRESSION="both"
+
+# 是否启用Mock
+VITE_MOCK_SERVER_ENABLE=false

build/buildEnv.ts

@@ -4,7 +4,7 @@ export const buildEnvironment = () => {
 	const environment: BuildOptions = {
 		assetsInlineLimit: 20000,
 		// 构建输出的目录，默认值为"dist"
-		outDir: 'dist',
+		outDir: 'docker/dist',
 		// 用于指定使用的代码压缩工具。在这里，minify 被设置为 'terser'，表示使用 Terser 进行代码压缩。默认值terser
 		// esbuild 打包更快，但是不能去除 console.log，terser打包慢，但能去除 console.log
 		minify: 'terser',
@@ -39,6 +39,8 @@ export const buildEnvironment = () => {
 				manualChunks: (id, meta) => {
 					// 如果是包含在包中则打包成 vendor
 					if (id.includes('node_modules')) {
+						meta.getModuleIds();
+
 						return 'vendor';
 					}
 				},

build/info.ts

@@ -3,17 +3,17 @@ import dayjs, { type Dayjs } from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import gradientString from 'gradient-string';
 import type { Plugin } from 'vite';
-import { loadEnv } from 'vite';
-import { getPackageSize, root, wrapperEnv } from './utils';
+import { getPackageSize } from './utils';
 
 dayjs.extend(duration);
-const { VITE_PORT } = wrapperEnv(loadEnv('dev', root));
 
-const welcomeMessage = gradientString('cyan', 'magenta').multiline(
-	`您好! 欢迎使用 bunny 系列开发模板 
+const welcomeMessage = (VITE_PORT: string) => {
+	return gradientString('cyan', 'magenta').multiline(
+		`您好! 欢迎使用 bunny 系列开发模板 
 项目访问地址如下：
 http://localhost:${VITE_PORT}`,
-);
+	);
+};
 
 const boxenOptions: BoxenOptions = {
 	padding: 0.5,
@@ -21,7 +21,7 @@ const boxenOptions: BoxenOptions = {
 	borderStyle: 'round',
 };
 
-export function viteBuildInfo(): Plugin {
+export function viteBuildInfo(VITE_PORT: string): Plugin {
 	let config: { command: string };
 	let startTime: Dayjs;
 	let endTime: Dayjs;
@@ -33,7 +33,7 @@ export function viteBuildInfo(): Plugin {
 			outDir = resolvedConfig.build?.outDir ?? 'dist';
 		},
 		buildStart() {
-			console.log(boxen(welcomeMessage, boxenOptions));
+			console.log(boxen(welcomeMessage(VITE_PORT), boxenOptions));
 			if (config.command === 'build') {
 				startTime = dayjs(new Date());
 			}

build/plugins.ts

@@ -8,7 +8,12 @@ import { viteMockServe } from 'vite-plugin-mock';
 import { viteBuildInfo } from './info';
 import { configCompressPlugin } from './compress.ts';
 
-export function getPluginsList(VITE_CDN: boolean, VITE_COMPRESSION: any): PluginOption[] {
+export function getPluginsList(
+	VITE_CDN: boolean,
+	VITE_COMPRESSION: any,
+	VITE_PORT: string,
+	VITE_MOCK_SERVER_ENABLE: boolean,
+): PluginOption[] {
 	return [
 		vue(),
 		legacy({
@@ -36,9 +41,13 @@ export function getPluginsList(VITE_CDN: boolean, VITE_COMPRESSION: any): Plugin
 		}),
 		vueJsx(),
 		compression(),
-		viteBuildInfo(),
+		viteBuildInfo(VITE_PORT),
 		VITE_CDN ? cdn : null,
 		configCompressPlugin(VITE_COMPRESSION),
-		viteMockServe({ mockPath: 'src/api/mock' }),
+		viteMockServe({
+			mockPath: 'src/api/mock',
+			enable: VITE_MOCK_SERVER_ENABLE,
+			watchFiles: true,
+		}),
 	];
 }

package.json

@@ -20,11 +20,11 @@
 		"esm"
 	],
 	"scripts": {
-		"dev": "vite",
-		"serve": "vite",
-		"start": "vite",
-		"build": "vite build",
-		"preview": "vite preview",
+		"dev": "vite --mode dev",
+		"serve": "vite --mode dev",
+		"start": "vite --mode dev",
+		"build": "vite build --mode prod",
+		"preview": "vite preview --mode prod",
 		"lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
 		"lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
 		"lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",

public/verify.json

@@ -1 +1 @@
-{"version":1721112961141}
+{"version":1721287216728}

src/api/mock/i18n/_index.bundled_1720007430967_wzfmy0qn9oq.mjs

@@ -1,53 +0,0 @@
-// src/api/mock/i18n/modules/zh_cn.ts
-var zh_cn = {
-  login: {
-    reset: "\u91CD\u7F6E",
-    register: "\u767B\u5F55"
-  },
-  home: {},
-  tabs: {},
-  header: {
-    fullScreen: "\u5168\u5C4F",
-    exitFullScreen: "\u9000\u51FA\u5168\u5C4F",
-    personalData: "\u4E2A\u4EBA\u4FE1\u606F",
-    changePassword: "\u4FEE\u6539\u5BC6\u7801",
-    logout: "\u9000\u51FA\u767B\u5F55"
-  },
-  tip: {
-    loading: "\u52A0\u8F7D\u4E2D..."
-  }
-};
-
-// src/api/mock/i18n/modules/en.ts
-var en = {
-  login: {
-    reset: "reset",
-    register: "register"
-  },
-  home: {},
-  tabs: {},
-  header: {
-    fullScreen: "Full Screen",
-    exitFullScreen: "Exit Full Screen",
-    personalData: "Personal Data",
-    changePassword: "Change Password",
-    logout: "Logout"
-  },
-  tip: {
-    loading: "Loading..."
-  }
-};
-
-// src/api/mock/i18n/index.ts
-var list = [
-  {
-    url: "/mock/getI18n",
-    method: "get",
-    response: () => ({ data: { zh_cn, en, local: "zh_cn" } })
-  }
-];
-var i18n_default = list;
-export {
-  i18n_default as default
-};
-//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsic3JjL2FwaS9tb2NrL2kxOG4vbW9kdWxlcy96aF9jbi50cyIsICJzcmMvYXBpL21vY2svaTE4bi9tb2R1bGVzL2VuLnRzIiwgInNyYy9hcGkvbW9jay9pMThuL2luZGV4LnRzIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX2luamVjdGVkX2ZpbGVuYW1lX18gPSBcIkQ6XFxcXFByb2plY3RcXFxcd2ViXFxcXEJ1bm55LUNsaVxcXFx0ZW1wbGF0ZVxcXFx2dWVcXFxcdml0ZV90c19hdXRvXFxcXHNyY1xcXFxhcGlcXFxcbW9ja1xcXFxpMThuXFxcXG1vZHVsZXNcXFxcemhfY24udHNcIjtjb25zdCBfX2luamVjdGVkX2Rpcm5hbWVfXyA9IFwiRDpcXFxcUHJvamVjdFxcXFx3ZWJcXFxcQnVubnktQ2xpXFxcXHRlbXBsYXRlXFxcXHZ1ZVxcXFx2aXRlX3RzX2F1dG9cXFxcc3JjXFxcXGFwaVxcXFxtb2NrXFxcXGkxOG5cXFxcbW9kdWxlc1wiO2NvbnN0IF9faW5qZWN0ZWRfaW1wb3J0X21ldGFfdXJsX18gPSBcImZpbGU6Ly8vRDovUHJvamVjdC93ZWIvQnVubnktQ2xpL3RlbXBsYXRlL3Z1ZS92aXRlX3RzX2F1dG8vc3JjL2FwaS9tb2NrL2kxOG4vbW9kdWxlcy96aF9jbi50c1wiO2V4cG9ydCBjb25zdCB6aF9jbiA9IHtcclxuXHRsb2dpbjoge1xyXG5cdFx0cmVzZXQ6ICdcdTkxQ0RcdTdGNkUnLFxyXG5cdFx0cmVnaXN0ZXI6ICdcdTc2N0JcdTVGNTUnLFxyXG5cdH0sXHJcblx0aG9tZToge30sXHJcblx0dGFiczoge30sXHJcblx0aGVhZGVyOiB7XHJcblx0XHRmdWxsU2NyZWVuOiAnXHU1MTY4XHU1QzRGJyxcclxuXHRcdGV4aXRGdWxsU2NyZWVuOiAnXHU5MDAwXHU1MUZBXHU1MTY4XHU1QzRGJyxcclxuXHRcdHBlcnNvbmFsRGF0YTogJ1x1NEUyQVx1NEVCQVx1NEZFMVx1NjA2RicsXHJcblx0XHRjaGFuZ2VQYXNzd29yZDogJ1x1NEZFRVx1NjUzOVx1NUJDNlx1NzgwMScsXHJcblx0XHRsb2dvdXQ6ICdcdTkwMDBcdTUxRkFcdTc2N0JcdTVGNTUnLFxyXG5cdH0sXHJcblx0dGlwOiB7XHJcblx0XHRsb2FkaW5nOiAnXHU1MkEwXHU4RjdEXHU0RTJELi4uJyxcclxuXHR9LFxyXG59O1xyXG4iLCAiY29uc3QgX19pbmplY3RlZF9maWxlbmFtZV9fID0gXCJEOlxcXFxQcm9qZWN0XFxcXHdlYlxcXFxCdW5ueS1DbGlcXFxcdGVtcGxhdGVcXFxcdnVlXFxcXHZpdGVfdHNfYXV0b1xcXFxzcmNcXFxcYXBpXFxcXG1vY2tcXFxcaTE4blxcXFxtb2R1bGVzXFxcXGVuLnRzXCI7Y29uc3QgX19pbmplY3RlZF9kaXJuYW1lX18gPSBcIkQ6XFxcXFByb2plY3RcXFxcd2ViXFxcXEJ1bm55LUNsaVxcXFx0ZW1wbGF0ZVxcXFx2dWVcXFxcdml0ZV90c19hdXRvXFxcXHNyY1xcXFxhcGlcXFxcbW9ja1xcXFxpMThuXFxcXG1vZHVsZXNcIjtjb25zdCBfX2luamVjdGVkX2ltcG9ydF9tZXRhX3VybF9fID0gXCJmaWxlOi8vL0Q6L1Byb2plY3Qvd2ViL0J1bm55LUNsaS90ZW1wbGF0ZS92dWUvdml0ZV90c19hdXRvL3NyYy9hcGkvbW9jay9pMThuL21vZHVsZXMvZW4udHNcIjtleHBvcnQgY29uc3QgZW4gPSB7XHJcblx0bG9naW46IHtcclxuXHRcdHJlc2V0OiAncmVzZXQnLFxyXG5cdFx0cmVnaXN0ZXI6ICdyZWdpc3RlcicsXHJcblx0fSxcclxuXHRob21lOiB7fSxcclxuXHR0YWJzOiB7fSxcclxuXHRoZWFkZXI6IHtcclxuXHRcdGZ1bGxTY3JlZW46ICdGdWxsIFNjcmVlbicsXHJcblx0XHRleGl0RnVsbFNjcmVlbjogJ0V4aXQgRnVsbCBTY3JlZW4nLFxyXG5cdFx0cGVyc29uYWxEYXRhOiAnUGVyc29uYWwgRGF0YScsXHJcblx0XHRjaGFuZ2VQYXNzd29yZDogJ0NoYW5nZSBQYXNzd29yZCcsXHJcblx0XHRsb2dvdXQ6ICdMb2dvdXQnLFxyXG5cdH0sXHJcblx0dGlwOiB7XHJcblx0XHRsb2FkaW5nOiAnTG9hZGluZy4uLicsXHJcblx0fSxcclxufTtcclxuIiwgImNvbnN0IF9faW5qZWN0ZWRfZmlsZW5hbWVfXyA9IFwiRDpcXFxcUHJvamVjdFxcXFx3ZWJcXFxcQnVubnktQ2xpXFxcXHRlbXBsYXRlXFxcXHZ1ZVxcXFx2aXRlX3RzX2F1dG9cXFxcc3JjXFxcXGFwaVxcXFxtb2NrXFxcXGkxOG5cXFxcaW5kZXgudHNcIjtjb25zdCBfX2luamVjdGVkX2Rpcm5hbWVfXyA9IFwiRDpcXFxcUHJvamVjdFxcXFx3ZWJcXFxcQnVubnktQ2xpXFxcXHRlbXBsYXRlXFxcXHZ1ZVxcXFx2aXRlX3RzX2F1dG9cXFxcc3JjXFxcXGFwaVxcXFxtb2NrXFxcXGkxOG5cIjtjb25zdCBfX2luamVjdGVkX2ltcG9ydF9tZXRhX3VybF9fID0gXCJmaWxlOi8vL0Q6L1Byb2plY3Qvd2ViL0J1bm55LUNsaS90ZW1wbGF0ZS92dWUvdml0ZV90c19hdXRvL3NyYy9hcGkvbW9jay9pMThuL2luZGV4LnRzXCI7aW1wb3J0IHsgTW9ja01ldGhvZCB9IGZyb20gJ3ZpdGUtcGx1Z2luLW1vY2snO1xyXG5pbXBvcnQgeyB6aF9jbiB9IGZyb20gJy4vbW9kdWxlcy96aF9jbi50cyc7XHJcbmltcG9ydCB7IGVuIH0gZnJvbSAnLi9tb2R1bGVzL2VuLnRzJztcclxuXHJcbmNvbnN0IGxpc3Q6IE1vY2tNZXRob2RbXSA9IFtcclxuXHR7XHJcblx0XHR1cmw6ICcvbW9jay9nZXRJMThuJyxcclxuXHRcdG1ldGhvZDogJ2dldCcsXHJcblx0XHRyZXNwb25zZTogKCkgPT4gKHsgZGF0YTogeyB6aF9jbiwgZW4sIGxvY2FsOiAnemhfY24nIH0gfSksXHJcblx0fSxcclxuXTtcclxuXHJcbmV4cG9ydCBkZWZhdWx0IGxpc3Q7XHJcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBcVksSUFBTSxRQUFRO0FBQUEsRUFDbFosT0FBTztBQUFBLElBQ04sT0FBTztBQUFBLElBQ1AsVUFBVTtBQUFBLEVBQ1g7QUFBQSxFQUNBLE1BQU0sQ0FBQztBQUFBLEVBQ1AsTUFBTSxDQUFDO0FBQUEsRUFDUCxRQUFRO0FBQUEsSUFDUCxZQUFZO0FBQUEsSUFDWixnQkFBZ0I7QUFBQSxJQUNoQixjQUFjO0FBQUEsSUFDZCxnQkFBZ0I7QUFBQSxJQUNoQixRQUFRO0FBQUEsRUFDVDtBQUFBLEVBQ0EsS0FBSztBQUFBLElBQ0osU0FBUztBQUFBLEVBQ1Y7QUFDRDs7O0FDakIrWCxJQUFNLEtBQUs7QUFBQSxFQUN6WSxPQUFPO0FBQUEsSUFDTixPQUFPO0FBQUEsSUFDUCxVQUFVO0FBQUEsRUFDWDtBQUFBLEVBQ0EsTUFBTSxDQUFDO0FBQUEsRUFDUCxNQUFNLENBQUM7QUFBQSxFQUNQLFFBQVE7QUFBQSxJQUNQLFlBQVk7QUFBQSxJQUNaLGdCQUFnQjtBQUFBLElBQ2hCLGNBQWM7QUFBQSxJQUNkLGdCQUFnQjtBQUFBLElBQ2hCLFFBQVE7QUFBQSxFQUNUO0FBQUEsRUFDQSxLQUFLO0FBQUEsSUFDSixTQUFTO0FBQUEsRUFDVjtBQUNEOzs7QUNiQSxJQUFNLE9BQXFCO0FBQUEsRUFDMUI7QUFBQSxJQUNDLEtBQUs7QUFBQSxJQUNMLFFBQVE7QUFBQSxJQUNSLFVBQVUsT0FBTyxFQUFFLE1BQU0sRUFBRSxPQUFPLElBQUksT0FBTyxRQUFRLEVBQUU7QUFBQSxFQUN4RDtBQUNEO0FBRUEsSUFBTyxlQUFROyIsCiAgIm5hbWVzIjogW10KfQo=

src/api/mock/mockProdServer.ts

@@ -0,0 +1,11 @@
+//  mockProdServer.ts
+import { createProdMockServer } from 'vite-plugin-mock/client';
+
+// 逐一导入您的mock.ts文件
+// 如果使用vite.mock.config.ts，只需直接导入文件
+// 可以使用 import.meta.glob功能来进行全部导入
+import module from '@/api/mock/i18n/index.ts';
+
+export function setupProdMockServer() {
+	createProdMockServer([...module]).then();
+}

src/api/service/request.ts

@@ -1,7 +1,8 @@
 import router from '@/router';
-import { localGet, localRemove } from '@/utils/util.ts';
+import { currentVersionIsNew, localGet, localRemove } from '@/utils/util.ts';
 import axios from 'axios';
 import mittBus from '@/utils/mittBus.ts';
+import _ from 'lodash';
 
 const request = axios.create({
 	// 默认请求地址
@@ -27,12 +28,20 @@ request.interceptors.request.use(config => {
 	return config;
 });
 
+/**
+ * * 检测是否是最新版本
+ */
+const checkVersion = _.throttle(() => currentVersionIsNew(), 3000, { leading: true, trailing: false });
+
 // 响应拦截器
 request.interceptors.response.use(
 	(response: any) => {
 		// 返回相应数据
 		const data = response.data;
 
+		// 检查版本是否最新
+		checkVersion();
+
 		// 登录过期
 		if (data.code === 208) {
 			// TODO 登录过期

vite.config.ts

@@ -17,8 +17,7 @@ import { root, wrapperEnv } from './build/utils';
 create();
 
 export default ({ mode }: ConfigEnv): UserConfigExport => {
-	const { VITE_CDN, VITE_COMPRESSION } = wrapperEnv(loadEnv(mode, root));
-
+	const { VITE_CDN, VITE_COMPRESSION, VITE_PORT, VITE_MOCK_SERVER_ENABLE } = wrapperEnv(loadEnv(mode, root));
 	return {
 		resolve: {
 			alias: {
@@ -29,7 +28,8 @@ export default ({ mode }: ConfigEnv): UserConfigExport => {
 		},
 		optimizeDeps: { include, exclude },
 		server: serverOptions(mode),
-		plugins: getPluginsList(VITE_CDN, VITE_COMPRESSION),
+		preview: serverOptions(mode),
+		plugins: getPluginsList(VITE_CDN, VITE_COMPRESSION, VITE_PORT, VITE_MOCK_SERVER_ENABLE),
 		esbuild: {
 			pure: ['console.log', 'debugger'],
 			jsxFactory: 'h',