项目初始化

web/vue.config.js

@@ -0,0 +1,78 @@
+const { defineConfig } = require("@vue/cli-service");
+const path = require("path");
+module.exports = defineConfig({
+  transpileDependencies: true,
+  publicPath: process.env.NODE_ENV === "production" ? "/your-project/" : "/",
+  // 输出文件目录
+  outputDir: "dist",
+
+  // 静态资源目录
+  assetsDir: "static",
+  devServer: {
+    headers: {
+      //   1. 允许开发环境跨域
+      "Access-Control-Allow-Origin": "*",
+    },
+    historyApiFallback: true,
+    open: true,
+    port: 8080,
+
+    client: {
+      overlay: {
+        runtimeErrors: (error) => {
+          const ignoreErrors = [
+            "ResizeObserver loop limit exceeded",
+            "ResizeObserver loop completed with undelivered notifications.",
+          ];
+          if (ignoreErrors.includes(error.message)) {
+            return false;
+          }
+          return true;
+        },
+      },
+    },
+  },
+  css: {
+    loaderOptions: {
+      scss: {
+        additionalData: `@use "~@/style/color.scss";`,
+      },
+    },
+    extract: {
+      filename: `css/.[contenthash:8].css`,
+      chunkFilename: `css/.[contenthash:8].chunk.css`,
+    },
+  },
+  configureWebpack: {
+    resolve: {
+      alias: {
+        "@": path.join(__dirname, "src"),
+      },
+    },
+  },
+
+  // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
+  lintOnSave: process.env.NODE_ENV !== "production",
+
+  // 是否使用包含运行时编译器的 Vue 构建版本
+  runtimeCompiler: false,
+
+  // 生产环境的 source map
+  productionSourceMap: true,
+
+  // webpack相关配置
+  configureWebpack: {
+    // 自定义打包入口
+    entry: "./src/main.js",
+
+    // 扩展 webpack 配置
+    plugins: [
+      // 添加插件
+    ],
+  },
+
+  // 第三方插件配置
+  pluginOptions: {
+    // ...
+  },
+});