Bereitstellung des Paket-Builds für Vue3+Vite+Ts-Projekt Combat 07

Paketaufbau

Erstellen Sie die Produktionsversion | Vite Offizielle chinesische Dokumentation

Pack

# 打包构建
npm run build
# 预览 测试构建结果是否可以用
npm run preview
# 访问 http://localhost:4173

Da die Domäne domänenübergreifend ist, kann das Cookie nicht übertragen werden und das Backend kann den Anmeldebestätigungscode nicht über das Cookie erhalten.

Sie können sich anmelden npm run devund USERden zwischengespeicherten Browser kopieren, um die http://localhost:4173Anmeldung zu überspringen und den Seiteninhalt anzuzeigen.

Fehler bei der TS-Prüfung

Die derzeit verwendete Element-Plus-Version ist v.2.1.8und beim Packen wird ein Fehler gemeldet:

node_modules/element-plus/es/components/time-select/index.d.ts:108:38 - error TS2304: Cannot find name 'ComponentSize'.
108         type: import("vue").PropType<ComponentSize>;

node_modules/element-plus/es/components/time-select/index.d.ts:277:38 - error TS2304: Cannot find name 'ComponentSize'.
277         type: import("vue").PropType<ComponentSize>;

node_modules/element-plus/lib/components/time-select/index.d.ts:108:38 - error TS2304: Cannot find name 'ComponentSize'.
108         type: import("vue").PropType<ComponentSize>;

node_modules/element-plus/lib/components/time-select/index.d.ts:277:38 - error TS2304: Cannot find name 'ComponentSize'.
277         type: import("vue").PropType<ComponentSize>;

Dies liegt daran, dass der Typ ts in der Deklarationsdatei für den Zeitauswahlkomponententyp von element-plus verwendet wird ComponentSize:

// node_modules\element-plus\lib\components\time-select\index.d.ts
size: {
    
    
    type: import("vue").PropType<ComponentSize>;
    values: readonly ["", "default", "small", "large"];
    default: string;
};

In dieser Datei gibt es jedoch keinen importsolchen Typ. Aus dem Quellcode sollte er aus diesem Modul importiert werden:

import type {
    
     ComponentSize } from '@element-plus/constants'

Typdefinition:

// node_modules\element-plus\es\constants\size.d.ts
export declare const componentSizes: readonly ["", "default", "small", "large"];
export declare type ComponentSize = typeof componentSizes[number];
export declare const componentSizeMap: {
    
    
    readonly large: 40;
    readonly default: 32;
    readonly small: 24;
};
export declare const getComponentSize: (size?: ComponentSize) => 40 | 32 | 24;

Derzeit verwendet nur die Typdeklarationsdatei der Zeitauswahlkomponente diesen Typ, während andere Komponenten dies nicht tun ComponentSize, aber:

// 以 button 组件为例
// node_modules\element-plus\lib\components\button\index.d.ts
readonly size: import("element-plus/es/utils").BuildPropReturn<StringConstructor, never, false, "" | "default" | "small" | "large", never>;

Lösung:

Der Grund dafür ist, dass TypeScript beim Packen .d.tsdie Typdeklarationsdatei überprüft . Sie können die Typprüfung der Deklarationsdatei überspringen , indem Sie „skipLibCheck“ konfigurieren.true

Der Beamte hat keine relevante Lösung gefunden, daher habe ich selbst ein Problem angesprochen. Wenn Sie interessiert sind, können Sie es weiterverfolgen: [ Fehlerbericht] [TypeScript] [time-select] Verwenden Sie den Befehl „vue-tsc“, um ts zu überprüfen und einen Fehler melden: „Kann den Namen ‚ComponentSize‘ nicht finden. Typ: import(„vue“).PropType;“, ohne „{skipLibCheck: true}“ in „tsconfig.ts“ Problem Nr. 7265 element-plus/element-plus (github.com)

CSS-Komprimierungswarnung

Beim Komprimieren der CSS-Datei wird ein Fehler gemeldet:

rendering chunks (11)...warnings when minifying css:
▲ [WARNING] "@charset" must be the first rule in the file

    <stdin>:1:30461:
      1 │ ...;flex-wrap:wrap;font-size:0}@charset "UTF-8";.el-radio{
    
    --el-radi...

Der Grund dafür ist, dass alle Element-Plus-Stildateien @charset "UTF-8";Kodierungsregeln enthalten und die Spezifikation erfordert, dass @charsetdie Regel das erste Element des Stylesheets sein muss und keine Zeichen davor stehen dürfen.

Das Verpackungsergebnis führt jedoch den Inhalt dieser Dateien zusammen, und es kann @charset "UTF-8";vorkommen, dass er nicht am Anfang der Datei steht.

Lösung:

Postcss kann Stylesheet-Regeln abrufen, und Sie können ein Postcss-Plug-In schreiben , um @charsetdie Regeln zu entfernen.

Konfiguration vite.config.ts:

// vite.config.ts
...
export default defineConfig({
    
    
  ...
  css: {
    
    
    ...
    postcss: {
    
    
      plugins: [
        // 自定义 postcss 插件
        {
    
    
          // 插件名称
          postcssPlugin: 'charset-removal',
          // 获取 @ 规则
          AtRule: {
    
    
            // 处理全部 @charset 规则
            charset: (atRule) => {
    
    
              // 移除规则
              atRule.remove()
            }
          }
        }
      ]
    }
  },
  ...
})

einsetzen

Wir empfehlen Webify von Tencent Cloud , das Vercel sehr ähnlich ist.

• Vorteil:
  • Persönlich denke ich, dass der größte Vorteil darin besteht, Gitee zu unterstützen (Github-Zugriff ist zu umständlich)
  • Inländisches Netzwerk
  • Schieben Sie Code an Git und lösen Sie so automatisch Anwendungs-Builds und -Bereitstellungen aus
• Nachteile: Gebühren (kann nach Volumen abgerechnet werden, die erste gehostete Anwendung ist 1 Monat lang kostenlos)