build(custom): 增加错误上报监控

.env

@@ -1,3 +1,3 @@
-VITE_TITLE = '捷兑通 - 商家端'
+VITE_TITLE='捷兑通 - 商家端'
 
-VITE_PORT = 3100
+VITE_PORT=3100

.env.development

@@ -1,13 +1,13 @@
 # 资源公共路径,需要以 /开头和结尾
-VITE_PUBLIC_PATH = '/'
+VITE_PUBLIC_PATH='/'
 
 # 是否启用MOCK
-VITE_USE_MOCK = false
+VITE_USE_MOCK=false
 
 # 是否启用代理
-VITE_USE_PROXY = true
+VITE_USE_PROXY=true
 
 # base api
-VITE_BASE_API = '/store'
+VITE_BASE_API='/store'
 
-VITE_ADMIN_API = '/admin'
+VITE_ADMIN_API='/admin'

.env.github

@@ -1,13 +0,0 @@
-# 自定义域名CNAME
-# VITE_CNAME = 'template.qszone.com'
-
-# 资源公共路径,需要以 /开头和结尾
-VITE_PUBLIC_PATH = '/vue-naive-admin/'
-
-VITE_USE_HASH = true
-
-# 是否启用MOCK
-VITE_USE_MOCK = true
-
-# base api
-VITE_BASE_API = '/api'

.env.production

@@ -1,16 +1,19 @@
 # 资源公共路径,需要以 /开头和结尾
-VITE_PUBLIC_PATH = '/static/mer'
+VITE_PUBLIC_PATH='/'
 
 # 是否启用MOCK
-VITE_USE_MOCK = false
+VITE_USE_MOCK=false
 
 # base api
-VITE_BASE_API = 'https://www.wanzhuanyongcheng.cn/store'
+VITE_BASE_API='//www.wanzhuanyongcheng.cn/store'
 
-VITE_ADMIN_API = '//www.wanzhuanyongcheng.cn'
+VITE_ADMIN_API='//www.wanzhuanyongcheng.cn'
 
 # 是否启用压缩
-VITE_USE_COMPRESS = true
+VITE_USE_COMPRESS=true
 
 # 压缩类型
-VITE_COMPRESS_TYPE = gzip
+VITE_COMPRESS_TYPE=gzip
+
+# 是否启用监控
+VITE_SENTRY=true

.env.sentry-build-plugin

@@ -0,0 +1,5 @@
+# DO NOT commit this file to your repository!
+# The SENTRY_AUTH_TOKEN variable is picked up by the Sentry Build Plugin.
+# It's used for authentication when uploading source maps.
+# You can also set this env variable in your own `.env` files and remove this file.
+SENTRY_AUTH_TOKEN="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"

.env.test

@@ -1,9 +1,18 @@
-VITE_PUBLIC_PATH = '/static/mer'
+VITE_PUBLIC_PATH='/'
 
 # 是否启用MOCK
-VITE_USE_MOCK = true
+VITE_USE_MOCK=false
 
 # base api
-VITE_BASE_API = 'https://test.wanzhuanyongcheng.cn/store'
+VITE_BASE_API='//test.wanzhuanyongcheng.cn/store'
 
-VITE_ADMIN_API = '//test.wanzhuanyongcheng.cn'
+VITE_ADMIN_API='//test.wanzhuanyongcheng.cn'
+
+# 是否启用压缩
+VITE_USE_COMPRESS=true
+
+# 压缩类型
+VITE_COMPRESS_TYPE=gzip
+
+# 是否启用监控
+VITE_SENTRY=false

Dockerfile

@@ -0,0 +1,5 @@
+FROM nginx:alpine
+
+COPY dist/ /usr/share/nginx/html
+
+COPY default.conf /etc/nginx/conf.d/default.conf

build/plugin/index.js

@@ -14,6 +14,7 @@ import viteCompression from 'vite-plugin-compression'
 import { configHtmlPlugin } from './html'
 import { configMockPlugin } from './mock'
 import unplugin from './unplugin'
+import { sentryVitePlugin } from '@sentry/vite-plugin'
 
 export function createVitePlugins(viteEnv, isBuild) {
   const plugins = [vue(), ...unplugin, configHtmlPlugin(viteEnv, isBuild), Unocss()]
@@ -36,5 +37,20 @@ export function createVitePlugins(viteEnv, isBuild) {
     )
   }
 
+  if (viteEnv.VITE_SENTRY) {
+    plugins.push(
+      sentryVitePlugin({
+        authToken: process.env.SENTRY_AUTH_TOKEN,
+        org: 'sentry',
+        project: 'jdt-mer',
+        url: 'https://w.huakk.top',
+        sourcemaps: {
+          ignore: ['node_modules'],
+          filesToDeleteAfterUpload: ['dist/**/*.js.map'],
+        },
+      })
+    )
+  }
+
   return plugins
 }

build/plugin/unplugin.js

@@ -5,6 +5,7 @@ import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
 import { FileSystemIconLoader } from 'unplugin-icons/loaders'
 import IconsResolver from 'unplugin-icons/resolver'
 import mkcert from 'vite-plugin-mkcert'
+import { sentryVitePlugin } from '@sentry/vite-plugin'
 
 /**
  * * unplugin-icons插件，自动引入iconify图标
@@ -45,4 +46,11 @@ export default [
     customDomId: '__CUSTOM_SVG_ICON__',
   }),
   mkcert(),
+  sentryVitePlugin({
+    authToken:
+      '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',
+    org: 'sentry',
+    project: 'jdt-mer',
+    url: 'https://w.huakk.top',
+  }),
 ]

default.conf

@@ -0,0 +1,18 @@
+server {
+   # 监听ipv4
+   listen 80;
+   # 监听ipv6
+   listen [::]:80;
+   server_name localhost;
+
+   location / {
+      root /usr/share/nginx/html;
+      index index.html index.htm;
+      try_files $uri $uri/ /index.html;
+   }
+
+   error_page 500 502 503 504 /50x.html;
+   location = /50x.html {
+      root /usr/share/nginx/html;
+   }
+}

docs/使用unocss.md

@@ -1,3 +0,0 @@
-推荐阅读作者在掘金的文章：
-
-[保熟的 UnoCSS 使用指北，优雅使用 antfu 大佬的原子化 CSS](https://juejin.cn/post/7142466784971456548)

docs/使用图标.md

@@ -1,40 +0,0 @@
-## 使用 iconify 图标
-
-首先去图标库地址：[icones](https://icones.js.org/) 找合适的图标
-
-### 1. 结合 unocss 使用
-
-```html
-<i i-carbon-sun />
-<i class="i-carbon-sun" />
-```
-
-### 2. 结合插件 unplugin-icons 自定义标签使用
-
-`<icon-[iconify图标名称]`
-
-```html
-<icon-ant-design:fullscreen-exit-outlined />
-<icon-ant-design:fullscreen-outlined />
-```
-
-这种方式还支持自定义 svg 图标，本项目自定义 svg 图标固定放在 src/assets/svg 下
-
-`<icon-custom-[svg图标文件名]`
-
-```
-<icon-custom-logo />
-```
-
-具体配置参看 build/plugin/unplugin.js
-
-### 3. 结合 Naive UI 的 NIcon 组件封装使用
-
-```html
-<!-- iconify图标 -->
-<TheIcon icon="material-symbols:delete-outline" />
-<!-- 自定义svg图标 -->
-<TheIcon icon="logo" type="custom" />
-```
-
-封装组件参看 src/components/icon

docs/安装pnpm.md

@@ -1,34 +0,0 @@
-## 安装 pnpm
-
-### 使用 Corepack 安装（推荐）
-
-从 v16.13 开始，Node.js 发布了 Corepack 来管理包管理器。 这是一项实验性功能，需要通过运行如下脚本来启用它：
-
-```
-npx corepack enable // 可能需要管理员权限
-```
-
-这将自动在您的系统上安装 pnpm。 但是，它可能不是最新版本的 pnpm。 若要升级，请检查[最新的 pnpm 版本](https://github.com/pnpm/pnpm/releases/latest) 并运行，如 7.14.0
-
-```
-corepack prepare pnpm@7.14.0 --activate
-```
-
-如果是 Node.js v16.17 或者更新的版本，可以直接安装最新版本的 pnpm
-
-```
-corepack prepare pnpm@latest --activate
-```
-
-### 使用 npm 安装
-
-```
-npm i -g pnpm
-```
-
-更新，卸了重新装
-
-```
-npm uninstall -g pnpm
-npm i -g pnpm
-```

nginx.conf

@@ -1,67 +0,0 @@
-upstream backend {
-    server 127.0.0.1:3000;
-    server 47.106.106.179:4000 backup;
-}
-
-server {
-    listen 80;
-    server_name www1.wanzhuanyongcheng.cn;
-    index index.php index.html index.htm default.php default.htm default.html;
-    root /www/wwwroot/www1.wanzhuanyongcheng.cn;
-
-    #PHP-INFO-START  PHP引用配置，可以注释或修改
-    include enable-php-00.conf;
-    #PHP-INFO-END
-
-    #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
-    include /www/server/panel/vhost/rewrite/www1.wanzhuanyongcheng.cn.conf;
-    #REWRITE-END
-
-    #禁止访问的文件或目录
-    location ~ ^/(\.user.ini|\.htaccess|\.git|\.env|\.svn|\.project|LICENSE|README.md) {
-        return 404;
-    }
-
-    #一键申请SSL证书验证目录相关设置
-    location ~ \.well-known {
-        allow all;
-    }
-
-    #禁止在证书验证目录放入敏感文件
-    if ( $uri ~ "^/\.well-known/.*\.(php|jsp|py|js|css|lua|ts|go|zip|tar\.gz|rar|7z|sql|bak)$" ) {
-        return 403;
-    }
-
-    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
-        expires 30d;
-        error_log /dev/null;
-        access_log /dev/null;
-    }
-
-    location ~ .*\.(js|css)?$ {
-        expires 12h;
-        error_log /dev/null;
-        access_log /dev/null;
-    }
-
-    location /api {
-        proxy_pass http://127.0.0.1:3000;
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-
-        error_page 502 = @switch_to_backup;
-    }
-
-    location @switch_to_backup {
-        proxy_pass http://47.106.106.179:4000;
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-
-        # Add any necessary additional configuration for backup container
-    }
-
-    access_log /www/wwwlogs/www1.wanzhuanyongcheng.cn.log;
-    error_log /www/wwwlogs/www1.wanzhuanyongcheng.cn.error.log;
-}

package.json

@@ -16,7 +16,8 @@
   },
   "lint-staged": {
     "*.{js,vue}": [
-      "eslint --ext .js,.vue ."
+      "eslint --ext .js,.vue .",
+      "npx prettier --write --end-of-line lf ."
     ]
   },
   "config": {
@@ -32,6 +33,8 @@
     ]
   },
   "dependencies": {
+    "@sentry/vite-plugin": "^2.10.1",
+    "@sentry/vue": "^7.80.1",
     "@unocss/eslint-config": "^0.55.7",
     "@vueuse/core": "^10.5.0",
     "@wangeditor/editor": "^5.1.23",

src/router/index.js

@@ -3,6 +3,7 @@ import { setupRouterGuard } from './guard'
 import { basicRoutes, EMPTY_ROUTE, NOT_FOUND_ROUTE } from './routes'
 import { getToken, isNullOrWhitespace } from '@/utils'
 import { useUserStore, usePermissionStore } from '@/store'
+import * as Sentry from '@sentry/vue'
 
 const isHash = true
 export const router = createRouter({
@@ -14,6 +15,22 @@ export const router = createRouter({
 export async function setupRouter(app) {
   await addDynamicRoutes()
   setupRouterGuard(router)
+  if (import.meta.env.VITE_SENTRY) {
+    Sentry.init({
+      app,
+      dsn: 'https://aa4308fc56a9d107786b8dbcd2ae56e8@w.huakk.top/13',
+      integrations: [
+        new Sentry.BrowserTracing({
+          tracePropagationTargets: ['localhost', /^https:\/\/w\.huakk\.top\/api/],
+          routingInstrumentation: Sentry.vueRouterInstrumentation(router),
+        }),
+        new Sentry.Replay(),
+      ],
+      tracesSampleRate: 1.0,
+      replaysSessionSampleRate: 0.1,
+      replaysOnErrorSampleRate: 1.0,
+    })
+  }
   app.use(router)
 }
 

src/views/goods/add/index.vue

@@ -1,6 +1,6 @@
 <template>
   <CommonPage show-footer :title="$route.title">
-    {{ model }}
+    <!-- {{ model }} -->
     <n-spin size="large" :show="isShowSpin">
       <n-form ref="formRef" label-width="100" :model="model" :rules="rules" label-placement="left">
         <n-grid :cols="2" :x-gap="24">

vercel.json

@@ -1,8 +0,0 @@
-{
-  "rewrites": [
-    {
-      "source": "/(.*)",
-      "destination": "/index.html"
-    }
-  ]
-}

vite.config.js

@@ -39,6 +39,7 @@ export default defineConfig(({ command, mode }) => {
       outDir: OUTPUT_DIR || 'dist',
       reportCompressedSize: false, // 启用/禁用 gzip 压缩大小报告
       chunkSizeWarningLimit: 1024, // chunk 大小警告的限制（单位kb）
+      sourcemap: true,
     },
   }
 })