🐛 fix(App): 修复打包出错的问题 | add(.env): 增加环境变量

.env.development

@@ -0,0 +1,2 @@
+NODE_ENV = development
+VUE_APP_BASE_URL = '/'

.env.production

@@ -0,0 +1,2 @@
+NODE_ENV = production
+VUE_APP_BASE_URL = '/'

prod.config.js

@@ -0,0 +1,133 @@
+// * 避免打包项
+const externals = {
+  vue: "Vue",
+  vuex: "Vuex",
+  "vue-router": "VueRouter",
+  axios: "axios",
+};
+
+// * 公共代码抽离
+const optimization = {
+  splitChunks: {
+    cacheGroups: {
+      vendors: {
+        name: "chunk-vendors",
+        test: /[\\/]node_modules[\\/]/,
+        priority: 100,
+        chunks: "all",
+        minChunks: 1,
+        maxInitialRequests: 5,
+        minSize: 0,
+      },
+      common: {
+        name: "chunk-common",
+        test: /[\\/]src[\\/]ts[\\/]/,
+        minChunks: 2,
+        maxInitialRequests: 5,
+        minSize: 0,
+        priority: 60,
+        chunks: "all",
+        reuseExistingChunk: true,
+      },
+      styles: {
+        name: "styles",
+        test: /\.(sa|sc|c)ss$/,
+        chunks: "all",
+        enforce: true,
+      },
+      runtimeChunk: {
+        name: "manifest",
+      },
+    },
+  },
+};
+
+// * 资源配置
+const cdns = {
+  dev: {},
+  build: {
+    css: [],
+    js: [
+      "https://cdn-novel.iycdm.com/static/vue.min.js",
+      "https://cdn-novel.iycdm.com/static/vuex.min.js",
+      "https://cdn-novel.iycdm.com/static/vue-router.min.js",
+      "https://cdn-novel.iycdm.com/static/vue-lazyload.js",
+      "https://cdn-novel.iycdm.com/static/axios.min.js",
+    ],
+  },
+};
+
+// * oss config
+const ossConfig = {
+  buildPath: "/",
+  region: "oss-cn-hangzhou",
+  ak: "LTAIowrHAk6HHxb8",
+  sk: "vhrLQEn1WW8WQphOPBfcDE8zwx7nel",
+  bucket: "zhuishuyun",
+};
+
+const ossCDN = "https://cdn-novel.iycdm.com/";
+
+// * 打包后资源上传oss
+const uploadAssetsToOSS = (config) => {
+  config
+    .plugin("webpack-aliyun-oss-plugin")
+    .use(require("webpack-aliyun-oss-plugin"), [
+      {
+        buildPath: ossConfig.buildPath,
+        region: ossConfig.region,
+        ak: ossConfig.ak,
+        sk: ossConfig.sk,
+        bucket: ossConfig.bucket,
+        filter: function(assets) {
+          return !/\.html$/.test(assets);
+        },
+      },
+    ]);
+};
+
+// * 打包gzip
+const assetsGzip = (config) => {
+  config
+    .plugin("compression-webpack-plugin")
+    .use(require("compression-webpack-plugin"), [
+      {
+        filename: "[path].gz[query]",
+        algorithm: "gzip",
+        test: /\.js$|\.html$|\.json$|\.css/,
+        threshold: 10240, // 只有大小大于该值的资源会被处理 10240
+        minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
+        deleteOriginalAssets: true, // 删除原文件
+      },
+    ]);
+};
+
+// * 代码压缩
+const codeUglify = (config) => {
+  config
+    .plugin("uglifyjs-webpack-plugin")
+    .use(require("uglifyjs-webpack-plugin"), [
+      {
+        uglifyOptions: {
+          //生产环境自动删除console
+          compress: {
+            drop_debugger: true,
+            drop_console: false,
+            pure_funcs: ["console.log"],
+          },
+        },
+        sourceMap: false,
+        parallel: true,
+      },
+    ]);
+};
+
+module.exports = {
+  uploadAssetsToOSS,
+  assetsGzip,
+  codeUglify,
+  externals,
+  optimization,
+  cdns,
+  ossCDN,
+};

src/App.vue

@@ -4,11 +4,17 @@
   </a-config-provider>
 </template>
 
-<script lang="ts" setup>
-import { ref } from "vue";
+<script lang="ts">
+import { defineComponent, ref } from "vue";
 import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
 
-const locale = ref(zhCN);
+const App = defineComponent({
+  setup() {
+    const locale = ref(zhCN);
 
-export { locale };
+    return { locale };
+  },
+});
+
+export default App;
 </script>

src/router/index.ts

@@ -4,7 +4,7 @@ import constantRoutes from "./modules/constant";
 const routes = constantRoutes;
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
+  history: createWebHistory(process.env.VUE_APP_BASE_URL),
   routes,
 });
 

vue.config.js

@@ -1,5 +1,10 @@
 module.exports = {
   publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
+  assetsDir:
+    process.env.NODE_ENV === "production"
+      ? "static" + new Date().toLocaleDateString().replace(/\//g, "-")
+      : "static",
+  productionSourceMap: false,
   devServer: {
     // * 接口跨域处理
     proxy: {