fix 更新vite vue element-plus版本及其他相关依赖版本

.env

@@ -4,5 +4,8 @@ VITE_PORT = 8888
 # open 运行 npm run dev 时自动打开浏览器
 VITE_OPEN = false
 
+# 打包是否开启 cdn（源文件 utils/build.ts），可自行修改
+VITE_OPEN_CDN = false
+
 # public path 配置线上环境路径（打包）、本地通过 http-server 访问时，请置空即可
 VITE_PUBLIC_PATH = /vue-next-admin-preview/

.eslintrc.js

@@ -13,9 +13,18 @@ module.exports = {
 	},
 	extends: ['plugin:vue/vue3-essential', 'plugin:vue/essential', 'eslint:recommended'],
 	plugins: ['vue', '@typescript-eslint'],
+	overrides: [
+		{
+			files: ['*.ts', '*.tsx', '*.vue'],
+			rules: {
+				'no-undef': 'off',
+			},
+		},
+	],
 	rules: {
 		// http://eslint.cn/docs/rules/
 		// https://eslint.vuejs.org/rules/
+		// https://typescript-eslint.io/rules/no-unused-vars/
 		'@typescript-eslint/ban-ts-ignore': 'off',
 		'@typescript-eslint/explicit-function-return-type': 'off',
 		'@typescript-eslint/no-explicit-any': 'off',
@@ -26,6 +35,9 @@ module.exports = {
 		'@typescript-eslint/ban-types': 'off',
 		'@typescript-eslint/no-non-null-assertion': 'off',
 		'@typescript-eslint/explicit-module-boundary-types': 'off',
+		'@typescript-eslint/no-redeclare': 'error',
+		'@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
+		'@typescript-eslint/no-unused-vars': [2],
 		'vue/custom-event-name-casing': 'off',
 		'vue/attributes-order': 'off',
 		'vue/one-component-per-file': 'off',
@@ -59,5 +71,6 @@ module.exports = {
 		'no-v-model-argument': 'off',
 		'no-case-declarations': 'off',
 		'no-console': 'error',
+		'no-redeclare': 'off',
 	},
 };

README.md

@@ -38,7 +38,7 @@
 > 由于 Vue3 不再支持 IE11，故而 ElementPlus 也不支持 IE11 及之前版本。
 #### ⚡ 使用说明
 
-建议使用 cnpm，因为 yarn 有时会报错。<a href="http://nodejs.cn/" target="_blank">node 版本 > 12xx.xx.x</a>
+建议使用 cnpm，因为 yarn 有时会报错。<a href="http://nodejs.cn/" target="_blank">node 版本[v16.x ~  v20.x)</a>
 
 ```bash
 # 克隆项目
@@ -46,11 +46,11 @@ git clone -b v3.2 https://gitee.com/tiger1103/gfast-ui.git
 # 进入项目
 cd gfast-ui
 # 安装依赖
-cnpm install
+npm install --registry=https://registry.npmmirror.com
 # 运行项目
-cnpm run dev
+npm run dev
 # 打包发布
-cnpm run build
+npm run build
 ```
 ## ❤特别鸣谢
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-next-admin",
-  "version": "2.2.0",
+  "version": "2.4.33",
   "description": "vue3 vite next admin template",
   "author": "lyt_20201208",
   "license": "MIT",
@@ -12,53 +12,58 @@
   "dependencies": {
     "@codemirror/lang-javascript": "^6.1.1",
     "@codemirror/theme-one-dark": "^6.1.0",
-    "@element-plus/icons-vue": "^2.0.10",
+    "@element-plus/icons-vue": "^2.1.0",
-    "axios": "^0.27.2",
+    "axios": "^1.3.5",
     "codemirror": "^6.0.1",
-    "countup.js": "^2.3.2",
+    "countup.js": "^2.6.0",
-    "cropperjs": "^1.5.12",
+    "cropperjs": "^1.5.13",
-    "echarts": "^5.3.3",
+    "echarts": "^5.4.2",
     "echarts-gl": "^2.0.9",
-    "echarts-wordcloud": "^2.0.0",
+    "echarts-wordcloud": "^2.1.0",
-    "element-plus": "^2.2.26",
+    "element-plus": "^2.3.3",
     "js-cookie": "^3.0.1",
     "jsplumb": "^2.15.6",
     "lodash": "^4.17.21",
     "mitt": "^3.0.0",
     "nprogress": "^0.2.0",
-    "pinia": "^2.0.16",
+    "pinia": "^2.0.34",
     "print-js": "^1.6.0",
     "qrcodejs2-fixes": "^0.0.2",
     "screenfull": "^6.0.2",
     "sortablejs": "^1.15.0",
     "spark-md5": "^3.0.2",
-    "splitpanes": "^3.1.1",
+    "splitpanes": "^3.1.5",
-    "vue": "^3.2.37",
+    "vue": "^3.2.47",
     "vue-clipboard3": "^2.0.0",
     "vue-codemirror": "^6.1.1",
     "vue-grid-layout": "^3.0.0-beta1",
     "vue-i18n": "^9.2.2",
-    "vue-router": "^4.1.2",
+    "vue-router": "^4.1.6",
     "vue-simple-uploader": "^1.0.0-beta.5",
-    "vue-ueditor-wrap": "^3.0.8"
+    "vue-ueditor-wrap": "^3.0.8",
+    "qs": "^6.11.1",
+    "vue-demi": "^0.13.11"
   },
   "devDependencies": {
-    "@types/node": "^18.0.6",
+    "@types/node": "^18.15.11",
     "@types/nprogress": "^0.2.0",
-    "@types/sortablejs": "^1.13.0",
+    "@types/sortablejs": "^1.15.1",
-    "@typescript-eslint/eslint-plugin": "^5.30.7",
+    "@typescript-eslint/eslint-plugin": "^5.58.0",
-    "@typescript-eslint/parser": "^5.30.7",
+    "@typescript-eslint/parser": "^5.58.0",
-    "@vitejs/plugin-vue": "^2.3.3",
+    "@vitejs/plugin-vue": "^4.1.0",
-    "@vue/compiler-sfc": "^3.2.37",
+    "@vue/compiler-sfc": "^3.2.47",
     "dotenv": "^16.0.1",
-    "eslint": "^8.20.0",
+    "eslint": "^8.38.0",
-    "eslint-plugin-vue": "^9.2.0",
+    "eslint-plugin-vue": "^9.10.0",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.7",
-    "sass": "^1.53.0",
+    "sass": "^1.61.0",
     "sass-loader": "^13.0.2",
-    "typescript": "^4.7.4",
+    "typescript": "^5.0.4",
-    "vite": "^2.9.14",
+    "vite": "^4.2.1",
-    "vue-eslint-parser": "^9.0.3"
+    "vite-plugin-cdn-import": "^0.3.5",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-vue-setup-extend-plus": "^0.1.0",
+    "vue-eslint-parser": "^9.1.1"
   },
   "browserslist": [
     "> 1%",
@@ -69,8 +74,8 @@
     "url": "https://gitee.com/lyt-top/vue-next-admin/issues"
   },
   "engines": {
-    "node": ">=12.0.0",
+    "node": ">=16.0.0",
-    "npm": ">= 6.0.0"
+    "npm": ">=7.0.0"
   },
   "keywords": [
     "vue",

src/utils/build.ts

@@ -0,0 +1,125 @@
+import importToCDN from 'vite-plugin-cdn-import';
+
+/**
+ * 打包相关
+ * 注意 prodUrl：使用的是 jsdelivr 还是 unpkg。它们的 path 可能不一致
+ * 文章链接：https://blog.csdn.net/qq_34450741/article/details/129766676，使用的是 jsdelivr
+ * @description importToCDN https://github.com/mmf-fe/vite-plugin-cdn-import
+ * @description cdn 在线引入的 cdn 地址配置。path：https://www.jsdelivr.com/ || https://unpkg.com/
+ * @description external 打包时，过滤包导入。参考：https://rollupjs.org/configuration-options/#external
+ */
+export const buildConfig = {
+    cdn() {
+        return importToCDN({
+            prodUrl: 'https://unpkg.com/{name}@{version}/{path}',
+            modules: [
+                // autoComplete('vue'),
+                // autoComplete('axios'),
+                {
+                    name: 'vue',
+                    var: 'Vue',
+                    path: 'dist/vue.global.js',
+                },
+                {
+                    name: 'vue-demi',
+                    var: 'VueDemi',
+                    path: 'lib/index.iife.js',
+                },
+                {
+                    name: 'vue-router',
+                    var: 'VueRouter',
+                    path: 'dist/vue-router.global.js',
+                },
+                {
+                    name: 'element-plus',
+                    var: 'ElementPlus',
+                    path: 'dist/index.full.js',
+                },
+                // {
+                // 	name: '@element-plus/icons-vue',
+                // 	var: 'ElementPlusIconsVue',
+                // 	path: 'dist/index.iife.min.js',
+                // },
+                // {
+                // 	name: 'echarts',
+                // 	var: 'echarts',
+                // 	path: 'dist/echarts.min.js',
+                // },
+                // {
+                // 	name: 'echarts-gl',
+                // 	var: 'echarts-gl',
+                // 	path: 'dist/echarts-gl.min.js',
+                // },
+                // {
+                // 	name: 'echarts-wordcloud',
+                // 	var: 'echarts-wordcloud',
+                // 	path: 'dist/echarts-wordcloud.min.js',
+                // },
+                // {
+                // 	name: 'vue-i18n',
+                // 	var: 'VueI18n',
+                // 	path: 'dist/vue-i18n.global.min.js',
+                // },
+                // {
+                // 	name: 'jsplumb',
+                // 	var: 'jsPlumb',
+                // 	path: 'dist/js/jsplumb.min.js',
+                // },
+                // {
+                // 	name: 'cropperjs',
+                // 	var: 'Cropper',
+                // 	path: 'dist/cropper.min.js',
+                // },
+                // {
+                // 	name: 'sortablejs',
+                // 	var: 'Sortable',
+                // 	path: 'Sortable.min.js',
+                // },
+                // {
+                // 	name: 'qrcodejs2-fixes',
+                // 	var: 'QRCode',
+                // 	path: 'qrcode.min.js',
+                // },
+                // {
+                // 	name: 'print-js',
+                // 	var: 'printJS',
+                // 	path: 'dist/print.min.js',
+                // },
+                // {
+                // 	name: '@wangeditor/editor',
+                // 	var: 'wangEditor',
+                // 	path: 'dist/index.min.js',
+                // },
+                // {
+                // 	name: '@wangeditor/editor-for-vue',
+                // 	var: 'WangEditorForVue',
+                // 	path: 'dist/index.min.js',
+                // },
+                // {
+                // 	name: 'vue-grid-layout',
+                // 	var: 'VueGridLayout',
+                // 	path: 'https://cdn.jsdelivr.net/npm/vue-grid-layout@3.0.0-beta1/dist/vue-grid-layout.umd.min.js',
+                // },
+            ],
+        });
+    },
+    external: [
+        'vue',
+        // 'axios',
+        'vue-router',
+        'element-plus',
+        // '@element-plus/icons-vue',
+        // 'echarts',
+        // 'echarts-gl',
+        // 'echarts-wordcloud',
+        // 'vue-i18n',
+        // 'jsplumb',
+        // 'cropperjs',
+        // 'sortablejs',
+        // 'qrcodejs2-fixes',
+        // 'print-js',
+        // '@wangeditor/editor',
+        // '@wangeditor/editor-for-vue',
+        // 'vue-grid-layout',
+    ],
+};

src/utils/request.ts

@@ -1,12 +1,18 @@
-import axios from 'axios';
+import axios, { AxiosInstance } from 'axios';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { Session } from '/@/utils/storage';
+import qs from 'qs';
 
 // 配置新建一个 axios 实例
-const service = axios.create({
+const service: AxiosInstance = axios.create({
-	baseURL: import.meta.env.VITE_API_URL as any,
+	baseURL: import.meta.env.VITE_API_URL,
 	timeout: 50000,
 	headers: { 'Content-Type': 'application/json' },
+	paramsSerializer: {
+		serialize(params) {
+			return qs.stringify(params, { allowDots: true });
+		},
+	},
 });
 
 // 添加请求拦截器
@@ -14,7 +20,7 @@ service.interceptors.request.use(
 	(config) => {
 		// 在发送请求之前做些什么 token
 		if (Session.get('token')) {
-			(<any>config.headers).common['Authorization'] = `Bearer ${Session.get('token')}`;
+			config.headers!['Authorization'] = `Bearer ${Session.get('token')}`;
 		}
 		return config;
 	},

tsconfig.json

@@ -22,7 +22,7 @@
 		// "noEmit": true,                        /* Do not emit outputs. */
 		// "importHelpers": true /* Import emit helpers from 'tslib'. */,
 		// "downlevelIteration": true /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */,
-		// "isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
+		"isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
 
 		/* Strict Type-Checking Options */
 		"strict": true /* Enable all strict type-checking options. */,
@@ -68,5 +68,7 @@
 		/* Advanced Options */
 		"skipLibCheck": true /* Skip type checking of declaration files. */,
 		"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
-	}
+	},
+	"include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.tsx", "src/**/*.d.ts"], // **Represents any directory, and * represents any file. Indicates that all files in the src directory will be compiled
+	"exclude": ["node_modules", "dist"] // Indicates the file directory that does not need to be compiled
 }

vite.config.ts

@@ -1,8 +1,11 @@
 import vue from '@vitejs/plugin-vue';
 import { resolve } from 'path';
 import { defineConfig, loadEnv, ConfigEnv } from 'vite';
+import vueSetupExtend from 'vite-plugin-vue-setup-extend-plus';
+import viteCompression from 'vite-plugin-compression';
+import { buildConfig } from './src/utils/build';
 
-const pathResolve = (dir: string): any => {
+const pathResolve = (dir: string) => {
 	return resolve(__dirname, '.', dir);
 };
 
@@ -14,18 +17,16 @@ const alias: Record<string, string> = {
 const viteConfig = defineConfig((mode: ConfigEnv) => {
 	const env = loadEnv(mode.mode, process.cwd());
 	return {
-		plugins: [vue()],
+		plugins: [vue(), vueSetupExtend(), viteCompression()],
 		root: process.cwd(),
 		resolve: { alias },
 		base: mode.command === 'serve' ? './' : env.VITE_PUBLIC_PATH,
-		hmr: true,
+		optimizeDeps: { exclude: ['vue-demi'] },
-		optimizeDeps: {
-			include: ['element-plus/es/locale/lang/zh-cn', 'element-plus/es/locale/lang/en', 'element-plus/es/locale/lang/zh-tw'],
-		},
 		server: {
 			host: '0.0.0.0',
 			port: env.VITE_PORT as unknown as number,
-			open: env.VITE_OPEN,
+			open: JSON.parse(env.VITE_OPEN),
+			hmr: true,
 			proxy: {
 				'/gitee': {
 					target: 'https://gitee.com',
@@ -37,19 +38,19 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
 		},
 		build: {
 			outDir: 'dist',
-			sourcemap: false,
 			chunkSizeWarningLimit: 1500,
 			rollupOptions: {
 				output: {
-					entryFileNames: `assets/[name].${new Date().getTime()}.js`,
+					chunkFileNames: 'assets/js/[name]-[hash].js',
-					chunkFileNames: `assets/[name].${new Date().getTime()}.js`,
+					entryFileNames: 'assets/js/[name]-[hash].js',
-					assetFileNames: `assets/[name].${new Date().getTime()}.[ext]`,
+					assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
-					compact: true,
+					manualChunks(id) {
-					manualChunks: {
+						if (id.includes('node_modules')) {
-						vue: ['vue', 'vue-router', 'pinia'],
+							return id.toString().match(/\/node_modules\/(?!.pnpm)(?<moduleName>[^\/]*)\//)?.groups!.moduleName ?? 'vender';
-						echarts: ['echarts'],
+						}
 					},
 				},
+				...(JSON.parse(env.VITE_OPEN_CDN) ? { external: buildConfig.external } : {}),
 			},
 		},
 		css: { preprocessorOptions: { css: { charset: false } } },
@@ -57,8 +58,9 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
 			__VUE_I18N_LEGACY_API__: JSON.stringify(false),
 			__VUE_I18N_FULL_INSTALL__: JSON.stringify(false),
 			__INTLIFY_PROD_DEVTOOLS__: JSON.stringify(false),
+			__NEXT_VERSION__: JSON.stringify(process.env.npm_package_version),
+			__NEXT_NAME__: JSON.stringify(process.env.npm_package_name),
 		},
 	};
 });
-
 export default viteConfig;