打包构建
打包
# 打包构建
npm run build
# 预览 测试构建结果是否可以用
npm run preview
# 访问 http://localhost:4173
由于 domain 跨域，cookie 无法携带，后端无法通过 cookie 获取登录验证码。
可以从
npm run dev中登录将浏览器缓存的USER拷贝到http://localhost:4173跳过登录，查看页面内容。
TS 检查报错
当前使用的 element-plus 版本是 v.2.1.8，打包时会报错：
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>;
这是因为 element-plus 的 time-select 组件类型声明文件中使用了 ts 类型 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;
};
而该文件中并没有 import 该类型，从源码中查看应该从此模块中引入：
import type {
ComponentSize } from '@element-plus/constants'
类型定义：
// 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;
当前只有 time-select 组件的类型声明文件使用了这个类型，而其他组件使用的并不是 ComponentSize，而是：
// 以 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>;
解决办法：
究其原因就是打包的时候 TypeScript 对 .d.ts 类型声明文件进行了校验，可以通过配置 skipLibCheck 为 true，跳过声明文件的类型检查。
官方没有找到相关解决办法，我就自己提了个 Issue 有兴趣的可以跟踪看看：[Bug Report] [TypeScript] [time-select] Use the “vue-tsc” command to check ts and report an error: “Cannot find name ‘ComponentSize’. type: import(“vue”).PropType;”, without “{skipLibCheck: true}” in “tsconfig.ts” · Issue #7265 · element-plus/element-plus (github.com)
css 压缩警告
压缩 css 文件的时候报错：
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...
原因是 element-plus 的样式文件都包含 @charset "UTF-8"; 编码规则，规范要求 @charset 规则必须是样式表的第一个元素，前面不能有任何字符。
而打包结果将这些文件的内容合并，就存在 @charset "UTF-8"; 不在文件开头的情况。
解决办法：
postcss 可以获取样式表的规则，可以编写一个 postcss 插件将 @charset 规则移除。
配置 vite.config.ts：
// vite.config.ts
...
export default defineConfig({
...
css: {
...
postcss: {
plugins: [
// 自定义 postcss 插件
{
// 插件名称
postcssPlugin: 'charset-removal',
// 获取 @ 规则
AtRule: {
// 处理全部 @charset 规则
charset: (atRule) => {
// 移除规则
atRule.remove()
}
}
}
]
}
},
...
})
部署
推荐腾讯云的 Webify，它和 Vercel 很像。
- 优点：
- 个人认为最大的好处就是支持 Gitee（Github 访问太难受了）
- 国内网络
- 将代码推动到 Git，自动触发应用构建和部署
- 缺点：收费（可以按量计费，首个托管应用免费体验1个月）