add plugins & update readme

.env

@@ -0,0 +1,4 @@
+NODE_ENV = "development"
+BASE_URL = "./"
+VUE_APP_PUBLIC_PATH = "./"
+VUE_APP_API = "https://www.fastmock.site/mock/1f35985adb58af2c3341fd7803d8540f"

.env.production

@@ -1 +1,4 @@
-VUE_APP_BASE_URL = "https://www.fastmock.site/mock/1f35985adb58af2c3341fd7803d8540f/api"
+NODE_ENV = "production"
+BASE_URL = "https://techfly.top/"
+VUE_APP_PUBLIC_PATH = "vue3/base/template"
+VUE_APP_API = "https://www.fastmock.site/mock/1f35985adb58af2c3341fd7803d8540f"

README.md

@@ -2,7 +2,6 @@
 使用`vue3+TypeScript+Element-ui`封装的项目基础模版。在模版基础搭建完成后，会建立不同分支。初步规划为PC和H5版本,进一步封装。H5版本封装媒体查询、分化出微信h5版本，封装微信jsApi的调用。
 
 
-base-plugins:
 
 - [ ] vue.config.js 配置
 - [ ] vuex  /模块分解
@@ -18,6 +17,17 @@ base-plugins:
 - [ ] views
 - [ ] less
 - [ ] components
+
+base-plugins:
+
+- [x]修复HMR(热更新)失效
+- [x]添加别名
+- [x]`image-webpack-loader`压缩图片
+- [x]`webpack-bundle-analyzer`打包后文件大小分析
+- [x]比 gzip 体验更好的 Zopfli 压缩
+- [x]配置proxy代理解决跨域问题
+- [ ] less css预设
+
 ## Project setup
 ```
 npm install

babel.config.js

@@ -0,0 +1,11 @@
+const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
+
+const plugins = [];
+if (IS_PROD) {
+  plugins.push("transform-remove-console");
+}
+
+module.exports = {
+  presets: ["@vue/app", { useBuiltIns: "entry" }],
+  plugins
+};

package.json

@@ -16,6 +16,7 @@
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
+    "@gfx/zopfli": "^1.0.15",
     "@types/chai": "^4.2.11",
     "@types/mocha": "^5.2.4",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
@@ -30,13 +31,18 @@
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^5.0.2",
     "@vue/test-utils": "^2.0.0-0",
+    "babel-plugin-transform-remove-console": "^6.9.4",
+    "brotli-webpack-plugin": "^1.1.0",
     "chai": "^4.1.2",
+    "compression-webpack-plugin": "6.0.5",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^7.0.0-0",
+    "image-webpack-loader": "^7.0.1",
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
     "prettier": "^1.19.1",
-    "typescript": "~3.9.3"
+    "typescript": "~3.9.3",
+    "webpack-bundle-analyzer": "^4.2.0"
   }
 }

src/api/common.ts

@@ -8,6 +8,6 @@ import { HttpResponse } from "@/@types/index";
 export class CommonService {
   // 获取基本信息
   static getIndexInfo(): Promise<HttpResponse> {
-    return Axios.get("/auth/userInfo");
+    return Axios.get("/api/auth/userInfo");
   }
 }

src/utils/request.ts

@@ -5,7 +5,7 @@ import { getItem } from "@/utils/storage";
  * @description: 定义请求实例
  */
 const service = Axios.create({
-  baseURL: process.env.VUE_APP_BASE_URL,
+  baseURL: process.env.VUE_APP_API,
   timeout: 10000,
   headers: {
     Accept: "application/json",

vue.config.js

@@ -1 +1,128 @@
-module.exports = {};
+const path = require("path");
+
+const CompressionWebpackPlugin = require("compression-webpack-plugin");
+const zopfli = require("@gfx/zopfli");
+const BrotliPlugin = require("brotli-webpack-plugin");
+const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
+
+const resolve = dir => path.join(__dirname, dir);
+
+const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
+  .BundleAnalyzerPlugin;
+
+const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
+
+module.exports = {
+  publicPath: IS_PROD ? process.env.VUE_APP_PUBLIC_PATH : "./",
+  outputDir: process.env.outputDir || "dist", //生产环境构建文件的目录
+  assetsDir: "", //// 相对于outputDir的静态资源(js、css、img、fonts)目录
+  indexPath: "index.html", //指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
+  lintOnSave: process.env.NODE_ENV !== "production",
+  runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
+  productionSourceMap: !IS_PROD, // 生产环境的 source map
+  parallel: require("os").cpus().length > 1, //该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
+  pwa: {},
+
+  chainWebpack: config => {
+    /**
+     * @TODO 修复HMR(热更新)失效
+     */
+    config.resolve.symlinks(true);
+
+    /**
+     * @TODO 添加别名
+     */
+    config.resolve.alias
+      .set("@", resolve("src"))
+      .set("@assets", resolve("src/assets"))
+      .set("@components", resolve("src/components"))
+      .set("@plugins", resolve("src/plugins"))
+      .set("@views", resolve("src/views"))
+      .set("@router", resolve("src/router"))
+      .set("@store", resolve("src/store"))
+      .set("@utils", resolve("src/utils"));
+
+    /**
+     * @TODO 压缩图片
+     */
+    if (IS_PROD) {
+      config.module
+        .rule("images")
+        .use("image-webpack-loader")
+        .loader("image-webpack-loader")
+        .options({
+          mozjpeg: { progressive: true, quality: 65 },
+          optipng: { enabled: false },
+          pngquant: { quality: [0.65, 0.9], speed: 4 },
+          gifsicle: { interlaced: false }
+          // webp: { quality: 75 }
+        });
+    }
+
+    /**
+     * @TODO 打包后文件大小分析
+     */
+    if (IS_PROD) {
+      config.plugin("webpack-report").use(BundleAnalyzerPlugin, [
+        {
+          analyzerMode: "static"
+        }
+      ]);
+    }
+  },
+
+  /**
+   * @TODO 比 gzip 体验更好的 Zopfli 压缩
+   */
+  configureWebpack: config => {
+    const plugins = [];
+    if (IS_PROD) {
+      plugins.push(
+        new CompressionWebpackPlugin({
+          algorithm(input, compressionOptions, callback) {
+            return zopfli.gzip(input, compressionOptions, callback);
+          },
+          compressionOptions: {
+            numiterations: 15
+          },
+          minRatio: 0.99,
+          test: productionGzipExtensions
+        })
+      );
+      plugins.push(
+        new BrotliPlugin({
+          test: productionGzipExtensions,
+          minRatio: 0.99
+        })
+      );
+    }
+    config.plugins = [...config.plugins, ...plugins];
+  },
+
+  /**
+   * @TODO 配置proxy代理解决跨域问题
+   */
+  devServer: {
+    // overlay: { // 让浏览器 overlay 同时显示警告和错误
+    //   warnings: true,
+    //   errors: true
+    // },
+    // open: false, // 是否打开浏览器
+    // host: "localhost",
+    // port: "8080", // 代理端口
+    // https: false,
+    // hotOnly: false, // 热更新
+    proxy: {
+      "/api": {
+        target:
+          "https://www.fastmock.site/mock/1f35985adb58af2c3341fd7803d8540f", // 目标代理接口地址
+        secure: false,
+        changeOrigin: true, // 开启代理，在本地创建一个虚拟服务端
+        // ws: true, // 是否启用websockets
+        pathRewrite: {
+          "^/api": "/"
+        }
+      }
+    }
+  }
+};