optimize: ♻️ main.ts中引入多语言，路由打包上线加载不出页面，打包配置修改

.env

@@ -1,3 +1,2 @@
-# 请求api地址：process.env.VUE_APP_URL
-VUE_APP_URL=http://localhost:8088/xxx
-VUE_APP_FLAG = 'prod'
+# 请求api地址
+BUNNY_APP_URL=http://localhost:8088/xxx

.env.development

@@ -1,15 +1,2 @@
-# 本地环境
-VITE_USER_NODE_ENV = development
-
-# 公共基础路径
-VITE_PUBLIC_PATH = /
-
-# 是否开启 VitePWA
-VITE_PWA = false
-
-# 打包时是否删除 console
-VITE_DROP_CONSOLE = true
-
-# 开发环境接口地址
-VITE_API_URL = /api
-
+# 请求api地址
+BUNNY_APP_URL=http://localhost:8088/development

.env.production

@@ -1,18 +1,2 @@
-# 线上环境
-VITE_USER_NODE_ENV = production
-
-# 公共基础路径
-VITE_PUBLIC_PATH = /
-
-# 是否启用 gzip 或 brotli 压缩打包，如果需要多个压缩规则，可以使用 “,” 分隔
-# Optional: gzip | brotli | none
-VITE_BUILD_COMPRESS = none
-
-# 打包压缩后是否删除源文件
-VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
-
-# 打包时是否删除 console
-VITE_DROP_CONSOLE = true
-
-# 线上环境接口地址
-VITE_API_URL = " https://mock.mengxuegu.com/mock/64112a1afe77f949bc0d6ec6/antd"
+# 请求api地址
+BUNNY_APP_URL=http://localhost:8088/prod

.env.test

@@ -1,4 +0,0 @@
-NODE_ENV = 'production'
-# 请求api地址：process.env.VUE_APP_URL
-VUE_APP_URL=http://localhost:8088/xxx
-VUE_APP_FLAG = 'test'

package.json

@@ -9,9 +9,7 @@
 		"dev": "vite",
 		"serve": "vite",
 		"start": "vite",
-		"build:dev": "vue-tsc --noEmit && vite build --mode development",
-		"build:test": "vue-tsc --noEmit && vite build --mode test",
-		"build:pro": "vue-tsc --noEmit && vite build --mode production",
+		"build": "vite build",
 		"preview": "vite preview",
 		"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}\"",
@@ -38,6 +36,7 @@
 		"pinia-plugin-persistedstate": "^3.2.1",
 		"stylelint-scss": "^6.3.0",
 		"uuid": "^9.0.1",
+		"vite-plugin-compression2": "^1.1.1",
 		"vue": "^3.4.21",
 		"vue-cookies": "^1.8.3",
 		"vue-i18n": "^9.13.1",

src/router/index.ts

@@ -1,5 +1,5 @@
 import { statisticRoutes } from '@/router/module/statisticRoutes';
-import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router';
 import { pageRoutes } from './module/pageRoutes';
 
 /**
@@ -7,11 +7,7 @@ import { pageRoutes } from './module/pageRoutes';
  * * 如果不需要 createWebHistory
  */
 const router = createRouter({
-	history:
-		process.env.NODE_ENV === 'production'
-			? createWebHashHistory(import.meta.env.BASE_URL)
-			: createWebHistory(import.meta.env.BASE_URL),
+	history: createWebHistory(import.meta.env.BASE_URL), // createWebHashHistory()
 	routes: [...pageRoutes, ...statisticRoutes],
 });
-
 export default router;

src/router/module/pageRoutes.ts

@@ -26,7 +26,7 @@ function buildRouteTree(context: any, isIndex: boolean, route: any) {
 		const childrenRoute: any = {
 			name: childrenFileInfo?.name,
 			path: childrenFileInfo!.path,
-			component: isIndex ? () => import(/* @vite-ignore */ `@/views${childrenFileInfo?.replaceName}`) : undefined,
+			component: isIndex ? context[filePath] : undefined,
 			children: [],
 			meta: { isFullScreen: false },
 		};
@@ -49,7 +49,7 @@ const createRouteList = (context: any, isIndex: boolean) => {
 		const route: any = {
 			name: fileInfo?.name,
 			path: fileInfo!.path,
-			component: isIndex ? () => import(/* @vite-ignore */ fileInfo!.filePath, {}) : undefined,
+			component: isIndex ? context[filePath] : undefined,
 			children: [],
 			meta: { isFullScreen: false },
 		};

src/utils/date/date.ts

@@ -61,19 +61,21 @@ export const handleDateType = {
 
 /**
  * 得到开始和结束日期，得到中间所有天返回数组
- * @param {String} string 开始日期'2021-7-1'
- * @param {String} String 结束日期'2021-8-1'
+ * @param {String} startDay 开始日期'2021-7-1'
+ * @param {String} endDay 结束日期'2021-8-1'
  * @return {Array} ['2021-07-01', '2021-07-01'...., '2021-08-01']
  */
 export function getDayArr(startDay: string, endDay: string): Array<string> {
 	let startVal = moment(new Date(startDay)).format('YYYY-MM-DD');
 	const dayArr = [];
 	while (moment(startVal).isBefore(endDay)) {
+		// @ts-expect-error
 		dayArr.push(moment(new Date(startVal)).format('DD'));
 		// 自增
 		startVal = moment(new Date(startVal)).add(1, 'day').format('YYYY-MM-DD');
 	}
 	// 将结束日期的天放进数组
+	// @ts-expect-error
 	dayArr.push(moment(new Date(endDay)).format('DD'));
 	return dayArr;
 }

src/views/bunny/my/page.ts

@@ -1,8 +1,13 @@
 const route = {
+	name: 'my-route',
 	meta: { isFullScreen: true },
 	children: [
 		{ name: 'bunny_my_a', path: '/bunny/my/a', component: () => import('@/views/bunny/www/index.vue') },
-		{ name: 'bunny_my_a111', path: '/bunny/my/a/children', component: () => import('@/views/bunny/my/a/aChildren.vue') },
+		{
+			name: 'bunny_my_a111',
+			path: '/bunny/my/a/children',
+			component: () => import('@/views/bunny/my/a/aChildren.vue'),
+		},
 		{ name: 'bunny_my_a_b', path: '/bunny/my/a/b', component: () => import('@/views/bunny/my/a/b/index.vue') },
 	],
 };

src/views/home/common/about/page.js

@@ -1,4 +0,0 @@
-export default {
-	name: 'sw',
-	path: '/sw',
-};

vite.config.ts

@@ -3,11 +3,13 @@ import { resolve } from 'path';
 import { defineConfig, UserConfig } from 'vite';
 import legacy from '@vitejs/plugin-legacy';
 import vueJsx from '@vitejs/plugin-vue2-jsx';
+import { compression } from 'vite-plugin-compression2';
 
 export default defineConfig(
 	(): UserConfig => ({
-		// base: 'www.example.com',// ? 在每个文件前加上这个前缀
+		// base: './', // ? 在每个文件前加上这个前缀
 		// publicDir: './static',// ? 设置静态资源目录
+		envPrefix: 'BUNNY',
 		resolve: {
 			alias: {
 				'@': resolve(__dirname, './src'),
@@ -21,18 +23,18 @@ export default defineConfig(
 			cors: true,
 			proxy: {
 				'/api': {
-					target: process.env.VUE_APP_URL,
+					target: process.env.BUNNY_APP_URL,
 					changeOrigin: true,
 					rewrite: (path: string) => path.replace(/^\/api/, '/api'),
 				},
 				'/mock': {
-					target: process.env.VUE_APP_URL,
+					target: process.env.BUNNY_APP_URL,
 					changeOrigin: true,
-					rewrite: (path: string) => path.replace(/^\/mock/, ''),
+					rewrite: (path: string) => path.replace(/^\/mock/, '/mock'),
 				},
 			},
 		},
-		plugins: [vue(), legacy({ targets: ['defaults', 'not IE 11'] }), vueJsx()],
+		plugins: [vue(), legacy({ targets: ['defaults', 'not IE 11'] }), vueJsx(), compression()],
 		esbuild: {
 			pure: ['console.log', 'debugger'],
 			jsxFactory: 'h',
@@ -71,9 +73,16 @@ export default defineConfig(
 				// 用于配置输出选项
 				output: {
 					// 静态资源分类和包装
-					chunkFileNames: 'assets/js/[name]-[hash].js', // 用于指定代码分块的输出文件名格式
-					entryFileNames: 'assets/js/[name]-[hash].js', // 用于指定入口文件的输出文件名格式
+					chunkFileNames: 'js/[name]-[hash].js', // 用于指定代码分块的输出文件名格式
+					entryFileNames: 'js/[name]-[hash].js', // 用于指定入口文件的输出文件名格式
 					assetFileNames: 'assets/[ext]/[name]-[hash].[ext]', // 用于指定静态资源的输出文件名格式
+					// ? 配置文件生成方式
+					manualChunks: (id, meta) => {
+						// 如果是包含在包中则打包成 vendor
+						if (id.includes('mode_modules')) {
+							return 'vendor';
+						}
+					},
 				},
 			},
 		},