Déploiement de la construction de l'emballage du projet Vue3+Vite+Ts combat 07

construction de paquet

Construire la version de production | Vite Official Chinese Documentation

Paquet

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

Étant donné que le domaine est interdomaine, le cookie ne peut pas être transporté et le backend ne peut pas obtenir le code de vérification de connexion via le cookie.

Vous pouvez vous connecter à partir de npm run devet USERcopier le navigateur mis en cache pour http://localhost:4173ignorer la connexion et afficher le contenu de la page.

Erreur de vérification TS

La version element-plus actuellement utilisée est v.2.1.8, et une erreur sera signalée lors de l'empaquetage :

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>;

En effet, le type ts est utilisé dans le fichier de déclaration de type de composant time-select de element-plus 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;
};

Cependant, un tel type n'existe pas importdans ce fichier. À partir du code source, il doit être importé à partir de ce module :

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

Définition du type :

// 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;

Actuellement, seul le fichier de déclaration de type du composant time-select utilise ce type, contrairement aux autres composants ComponentSize, mais :

// 以 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>;

Solution:

.d.tsLa raison en est que TypeScript vérifie le fichier de déclaration de type lors de l'empaquetage Vous pouvez ignorer la vérification de type du fichier de déclaration en configurant skipLibCheck .true

Le responsable n'a pas trouvé de solution pertinente, j'ai donc soulevé un problème moi-même. Si vous êtes intéressé, vous pouvez le suivre : [ Rapport de bogue] [TypeScript] [time-select] Utilisez la commande "vue-tsc" pour vérifier ts et signaler une erreur : "Impossible de trouver le nom 'ComponentSize'. type : import ("vue").PropType ;", sans "{skipLibCheck : true}" dans "tsconfig.ts" Problème #7265 element-plus/element-plus (github.com)

avertissement de compression css

Lors de la compression du fichier css, une erreur est signalée :

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...

La raison en est que tous les fichiers de style élément-plus contiennent @charset "UTF-8";des règles d'encodage, et la spécification exige que @charsetla règle soit le premier élément de la feuille de style, et qu'il ne puisse y avoir aucun caractère devant.

Cependant, le résultat de l'empaquetage fusionne le contenu de ces fichiers et il existe @charset "UTF-8";une situation où n'est pas au début du fichier.

Solution:

postcss peut obtenir des règles de feuille de style et vous pouvez écrire un plug-in postcss pour @charsetsupprimer les règles.

Paramétragevite.config.ts :

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

déployer

Nous recommandons Webify de Tencent Cloud , qui est très similaire à Vercel.

• avantage:
  • Personnellement, je pense que le plus grand avantage est de supporter Gitee (l'accès à Github est trop inconfortable)
  • réseau domestique
  • Poussez le code vers Git, déclenchant automatiquement les builds et les déploiements d'applications
• Inconvénients : les charges (peuvent être facturées en fonction du volume, la première application hébergée est gratuite pendant 1 mois)