feat(build): 添加生产环境构建命令并优化相关配置

- 在 package.json 中添加 build:prd命令用于生产环境构建
- 新增 .env.prd 文件配置生产环境变量
- 在 vue.config.js 中添加 CompressionPlugin 插件配置，启用 gzip 压缩
- 优化 home.vue 中的空白 p 标签，使用   替代空内容

.env.prd

@@ -0,0 +1,6 @@
+# env
+NODE_ENV = 'prd' // 如果是生产环境，请记得切换为production
+
+# flag
+VUE_APP_FLAG='prd'
+VUE_APP_ADMIN='/api'

package.json

@@ -8,6 +8,7 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "build:dev": "vue-cli-service build --mode dev",
+    "build:prd": "vue-cli-service build --mode prd",
     "dev": "vue-cli-service serve --mode dev",
     "build:dat": "vue-cli-service build --mode dat",
     "dat": "vue-cli-service serve --mode dat",
@@ -20,6 +21,7 @@
     "@better-scroll/core": "^2.5.1",
     "axios": "^0.19.0",
     "better-scroll": "^2.5.1",
+    "compression-webpack-plugin": "^6.1.2",
     "core-js": "^2.6.5",
     "eruda": "^2.11.3",
     "fastclick": "^1.0.6",
@@ -47,7 +49,7 @@
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
     "babel-plugin-import": "^1.12.0",
-    "code-inspector-plugin": "^0.20.14",
+    "code-inspector-plugin": "^0.20.15",
     "eslint": "^5.16.0",
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-vue": "^5.0.0",

src/views/home/home.vue

@@ -119,19 +119,19 @@ export default {
                         <div class="flex">
                             <div class="service-item health">
                                 <h4>健康管理</h4>
-                                <p>  </p>
+                              <p>&nbsp;</p>
                                 <button class="go-btn" @click="goEcosystem(1, true)">去看看</button>
                             </div>
 
                             <div class="flex flex-column">
                                 <div class="service-item children">
                                     <h4>子女教育</h4>
-                                    <p>  </p>
+                                  <p>&nbsp;</p>
                                     <button class="go-btn-v" @click="goEcosystem(38)">去看看</button>
                                 </div>
                                 <div class="service-item wealth">
                                     <h4>财务管理</h4>
-                                    <p>  </p>
+                                  <p>&nbsp;</p>
                                     <button class="go-btn-v" @click="goEcosystem(48)">去看看</button>
                                 </div>
                             </div>
@@ -142,14 +142,14 @@ export default {
                         <div class="service-item old">
                             <div>
                                 <h4>养老服务</h4>
-                                <p>  </p>
+                              <p>&nbsp;</p>
                             </div>
                             <button class="go-btn" @click="goEcosystem(28)">去看看</button>
                         </div>
                         <div class="service-item life">
                             <div>
                                 <h4>生活娱乐</h4>
-                                <p>  </p>
+                              <p>&nbsp;</p>
                             </div>
                             <button class="go-btn" @click="goEcosystem(55)">去看看</button>
                         </div>
@@ -454,13 +454,13 @@ $bg-color: #f5f5f5;
 }
 .flex {
     &.flex-column {
-        flex-flow: column nowrap; 
+        flex-flow: column nowrap;
         width: 65%;
         gap: 4vw;
     }
-    
+
     &.service-row {
-        gap: 10px; 
+        gap: 10px;
         margin-top: -20px;
         justify-content: center;
         align-items: center;

vue.config.js

@@ -2,6 +2,7 @@ const autoprefixer = require('autoprefixer')
 const pxtoviewport = require('postcss-px-to-viewport')
 const { codeInspectorPlugin } = require('code-inspector-plugin')
 
+const CompressionPlugin = require('compression-webpack-plugin')
 const path = require('path')
 function resolve(dir) {
   return path.join(__dirname, dir)
@@ -77,5 +78,15 @@ module.exports = {
           return assetFilename.endsWith('.js')
         }
       })
+    config.plugins.push(
+      new CompressionPlugin({
+        filename: '[path][base].gz',
+        algorithm: 'gzip',
+        test: /\.(js|css|html|svg)$/,
+        threshold: 10240,
+        minRatio: 0.8,
+        deleteOriginalAssets: false,
+      })
+    )
   }
 }