fixbug: 修改bug: 🐛 移出rem

package-lock.json

@@ -14,18 +14,17 @@
 				"echarts": "^5.5.0",
 				"loadsh": "^0.0.4",
 				"pinia": "^2.1.7",
-				"postcss-pxtorem": "^6.1.0",
 				"stylelint-config-recess-order": "^4.6.0",
 				"stylelint-config-recommended-vue": "^1.5.0",
 				"stylelint-config-standard": "^36.0.0",
 				"stylelint-config-standard-scss": "^13.0.0",
 				"uuid": "^9.0.1",
+				"v-scale-screen": "^2.2.0",
 				"vue": "^3.2.13",
 				"vue-cookies": "^1.8.3",
 				"vue-echarts": "^6.6.9",
 				"vue-lazyload": "^3.0.0",
 				"vue-router": "^4.0.3",
-				"vue3-scale-box": "^0.1.9",
 				"webpackbar": "^6.0.0"
 			},
 			"devDependencies": {
@@ -40,6 +39,7 @@
 				"@vue/cli-service": "~5.0.0",
 				"@vue/eslint-config-typescript": "^9.1.0",
 				"commitizen": "^4.3.0",
+				"compression-webpack-plugin": "^11.0.0",
 				"cz-git": "^1.8.0",
 				"eslint": "^7.32.0",
 				"eslint-config-prettier": "^8.3.0",
@@ -5683,6 +5683,67 @@
 				"node": ">= 0.8.0"
 			}
 		},
+		"node_modules/compression-webpack-plugin": {
+			"version": "11.0.0",
+			"resolved": "https://registry.npmmirror.com/compression-webpack-plugin/-/compression-webpack-plugin-11.0.0.tgz",
+			"integrity": "sha512-Nz9dMiu0sag+mgJ5QTkRx0+vwrDZPU/gps7IdrkFE+oRSkgyoX4wbMol7QnXjI5/TEWx8yEwew9MiMjZgdLtjg==",
+			"dev": true,
+			"dependencies": {
+				"schema-utils": "^4.2.0",
+				"serialize-javascript": "^6.0.2"
+			},
+			"engines": {
+				"node": ">= 18.12.0"
+			},
+			"peerDependencies": {
+				"webpack": "^5.1.0"
+			}
+		},
+		"node_modules/compression-webpack-plugin/node_modules/ajv": {
+			"version": "8.12.0",
+			"resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.12.0.tgz",
+			"integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+			"dev": true,
+			"dependencies": {
+				"fast-deep-equal": "^3.1.1",
+				"json-schema-traverse": "^1.0.0",
+				"require-from-string": "^2.0.2",
+				"uri-js": "^4.2.2"
+			}
+		},
+		"node_modules/compression-webpack-plugin/node_modules/ajv-keywords": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+			"integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+			"dev": true,
+			"dependencies": {
+				"fast-deep-equal": "^3.1.3"
+			},
+			"peerDependencies": {
+				"ajv": "^8.8.2"
+			}
+		},
+		"node_modules/compression-webpack-plugin/node_modules/json-schema-traverse": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+			"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+			"dev": true
+		},
+		"node_modules/compression-webpack-plugin/node_modules/schema-utils": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-4.2.0.tgz",
+			"integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+			"dev": true,
+			"dependencies": {
+				"@types/json-schema": "^7.0.9",
+				"ajv": "^8.9.0",
+				"ajv-formats": "^2.1.1",
+				"ajv-keywords": "^5.1.0"
+			},
+			"engines": {
+				"node": ">= 12.13.0"
+			}
+		},
 		"node_modules/compression/node_modules/debug": {
 			"version": "2.6.9",
 			"resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
@@ -11956,14 +12017,6 @@
 				"postcss": "^8.2.15"
 			}
 		},
-		"node_modules/postcss-pxtorem": {
-			"version": "6.1.0",
-			"resolved": "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.1.0.tgz",
-			"integrity": "sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==",
-			"peerDependencies": {
-				"postcss": "^8.0.0"
-			}
-		},
 		"node_modules/postcss-reduce-initial": {
 			"version": "5.1.2",
 			"resolved": "https://registry.npmmirror.com/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz",
@@ -12841,9 +12894,9 @@
 			"dev": true
 		},
 		"node_modules/serialize-javascript": {
-			"version": "6.0.1",
+			"version": "6.0.2",
-			"resolved": "https://registry.npmmirror.com/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
+			"resolved": "https://registry.npmmirror.com/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
-			"integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
+			"integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
 			"dev": true,
 			"dependencies": {
 				"randombytes": "^2.1.0"
@@ -14394,6 +14447,17 @@
 				"uuid": "dist/bin/uuid"
 			}
 		},
+		"node_modules/v-scale-screen": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmmirror.com/v-scale-screen/-/v-scale-screen-2.2.0.tgz",
+			"integrity": "sha512-GHzwRYQwj5MTiYWxtdxI5S6DgEzFjSSMxg53TLddRgXjNSe/dG++Q+6AgrYS3HKDcWzccs19agF6UFcckxn1yA==",
+			"dependencies": {
+				"vue": "^3.2.37"
+			},
+			"peerDependencies": {
+				"vue": "^3.2.37"
+			}
+		},
 		"node_modules/v8-compile-cache": {
 			"version": "2.4.0",
 			"resolved": "https://registry.npmmirror.com/v8-compile-cache/-/v8-compile-cache-2.4.0.tgz",
@@ -14713,11 +14777,6 @@
 			"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
 			"dev": true
 		},
-		"node_modules/vue3-scale-box": {
-			"version": "0.1.9",
-			"resolved": "https://registry.npmmirror.com/vue3-scale-box/-/vue3-scale-box-0.1.9.tgz",
-			"integrity": "sha512-URKBWivTHglmwoqQTs9UBA+lWg7pMuyYusxI5ghU1ks3qZHcM+jCF5uoSiwlKpSd9XP47R3sO12oS+Sc5lW9ig=="
-		},
 		"node_modules/watchpack": {
 			"version": "2.4.0",
 			"resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",

package.json

@@ -22,18 +22,17 @@
 		"echarts": "^5.5.0",
 		"loadsh": "^0.0.4",
 		"pinia": "^2.1.7",
-		"postcss-pxtorem": "^6.1.0",
 		"stylelint-config-recess-order": "^4.6.0",
 		"stylelint-config-recommended-vue": "^1.5.0",
 		"stylelint-config-standard": "^36.0.0",
 		"stylelint-config-standard-scss": "^13.0.0",
 		"uuid": "^9.0.1",
+		"v-scale-screen": "^2.2.0",
 		"vue": "^3.2.13",
 		"vue-cookies": "^1.8.3",
 		"vue-echarts": "^6.6.9",
 		"vue-lazyload": "^3.0.0",
 		"vue-router": "^4.0.3",
-		"vue3-scale-box": "^0.1.9",
 		"webpackbar": "^6.0.0"
 	},
 	"devDependencies": {
@@ -48,6 +47,7 @@
 		"@vue/cli-service": "~5.0.0",
 		"@vue/eslint-config-typescript": "^9.1.0",
 		"commitizen": "^4.3.0",
+		"compression-webpack-plugin": "^11.0.0",
 		"cz-git": "^1.8.0",
 		"eslint": "^7.32.0",
 		"eslint-config-prettier": "^8.3.0",

postcss.config.js

@@ -1,6 +0,0 @@
-const autoprefixer = require('autoprefixer');
-const px2rem = require('postcss-pxtorem');
-
-module.exports = {
-	plugins: [autoprefixer(), px2rem({ rootValue: 80, unitPrecision: 5, propList: ['*'] })],
-};

src/App.vue

@@ -1,10 +1,10 @@
 <template>
-	<ScaleBox :width="1920" :height="1080">
+	<VScaleScreen width="1920" height="1080" style="background-color: #fff">
 		<router-view />
-	</ScaleBox>
+	</VScaleScreen>
 </template>
 <script lang="ts" setup>
-import ScaleBox from 'vue3-scale-box';
+import VScaleScreen from 'v-scale-screen';
 
 const debounce = (callback: (...args: any[]) => void, delay: number) => {
 	let tid: any;

src/assets/css/reset.css

@@ -1,4 +1,4 @@
-/* 选中文字颜色 */
+选中文字颜色
 *::selection {
 	color: #1f1f1f;
 	background: #b3d4fc;
@@ -79,14 +79,4 @@ input{
 /* 避免ios滑动滚动条卡顿 */
 *{
   -webkit-overflow-scrolling : touch
-}
+}
-
-
-body {
-	position: relative;
-	width: 1920px;
-	height: 1080px;
-	box-sizing: border-box;
-
-	transform-origin: left top;
-}

src/router/index.ts

@@ -1,4 +1,4 @@
-import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
+import { RouteRecordRaw, createRouter, createWebHashHistory, createWebHistory } from 'vue-router';
 
 const routes: Array<RouteRecordRaw> = [
 	{
@@ -14,7 +14,7 @@ const routes: Array<RouteRecordRaw> = [
  */
 const router = createRouter({
 	history:
-		process.env.NODE_ENV === 'production' ? createWebHashHistory(process.env.BASE_URL) : createWebHashHistory(process.env.BASE_URL),
+		process.env.NODE_ENV === 'production' ? createWebHashHistory(process.env.BASE_URL) : createWebHistory(process.env.BASE_URL),
 	routes,
 });
 

src/shims-vue.d.ts

@@ -4,4 +4,3 @@ declare module '*.vue' {
 	const component: DefineComponent<{}, {}, any>;
 	export default component;
 }
-declare module 'vue3-scale-box';

src/views/layout.vue

@@ -1,5 +1,5 @@
 <template>
-	<h1>成功</h1>
+	<h1>成功111</h1>
 	<div class="box"></div>
 	<div class="charts">
 		<ECharts :option="option" autoresize theme="dark" />

vue.config.js

@@ -1,7 +1,10 @@
 const { defineConfig } = require('@vue/cli-service');
+const CompressionPlugin = require('compression-webpack-plugin');
 const WebpackBar = require('webpackbar');
+
 module.exports = defineConfig({
 	transpileDependencies: true,
+	publicPath: process.env.NODE_ENV === 'production' ? './' : './',
 	productionSourceMap: false, // 不生成map文件-优化打包
 	// 生产环境，开启js\css压缩--- 打包优化
 	chainWebpack: config => {
@@ -33,5 +36,4 @@ module.exports = defineConfig({
 			new WebpackBar({ color: '#F6DCE0', profile: true }),
 		],
 	},
-	publicPath: process.env.NODE_ENV === 'production' ? './' : './',
 });