打包后页面打开空白可能是文件路径不对,修改vite.config.ts 文件里的 base 路径为 ./ 如果还是空白页面且没有报错,只是组件没有加载出来如下图: 这种情况是路由配置的错误,直接改一下 history 配置 再打包就可以打开页面了
message="HTTP版本不受支持(505)";break;default: message= `连接出错(${status})!`; }return`${message},请检查网络或联系管理员!`; }; 不要忘了配置代理 在vite.config.ts 里 exportdefaultdefineConfig({server: { host:"192.168.0.0", port:8080, https:false,//跨域的写法proxy: {"/api": { ta...
在build中新建gulpfile.ts文件 新增utils文件夹 touch gulpfile.ts mkdir utils 复制代码 gulpfile.ts代码如下: // 打包方式:串行(series) 并行(parallel) import { series, parallel } from "gulp"; import { withTaskName,runTask } from "./utils" /** * 1. 打包样式 * 2. 打包工具方法 * 3. 打包...
"extends": "@vue/tsconfig/tsconfig.dom.json", "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], "exclude": ["src/**/__tests__/*"], "compilerOptions": { "noUnusedLocals": false, "noUnusedParameters": false, "experimentalDecorators": true, "composite": true, "tsBuild...
二、打包分析 官网https://www.npmjs.com/package/rollup-plugin-visualizer 1. 安装 pnpm i rollup-plugin-visualizer-D 1. 2.vite.config.ts配置 import{visualizer}from'rollup-plugin-visualizer'// https://vitejs.dev/config/exportdefaultdefineConfig({// ...plugins:[// ...visualizer({open:true,/...
说了这么多,似乎有些跑题了,我们接着说为什么说用ts封装一个组件是件不容易的事请。 首先,这里的组件指的是通用组件。通用组件的开发,需要我们有很高的业务抽象能力。我们拿前端目前经常用的按钮button举例。想要开发一个通用的,功能丰富的按钮组件,我们需要考虑哪些方面呢?举例说明一下: ...
2.使用 rollup-plugin-visualizer(类似webpack的插件:webpack-bundle-analyzer) 进行打包分析,打包之后,会在根目录默认生成一个 report.html 文件 配置rollup-plugin-visualizer: 第一步安装:npm i rollup-plugin-visualizer -D 第二步配置: //vite.config.ts ...
基于Vue3+Vite+TS,二次封装element-plus业务组件|云盘无密 ↓↓↓下载看水印↓↓↓ 最早的时候,通过文件划分的形式实现模块化,将功能状态数据各自单独放到不同的 JS 文件中。 每个文件作为独立模块,引入到页面,一个script标签对应一个模块,然后调用模块化的成员。 弊端:模块与模块之间...
在vite-env.d.ts文件中声明vue文件的使用,添加如下代码,如以有该代码可忽略 /// <reference types="vite/client" />declare module'*.vue'{importtype{DefineComponent}from"vue";constcomponent:DefineComponent<{},{},any>exportdefaultcomponent} 创建并配置vue的全局声明ts文件 ...