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...
第104期:用vite+vue3+ts封装一个组件其实挺难的 我一直认为前端封装组件是一件非常简单的事情,不管我们用的技术栈是三大框架里的哪一个。对于一般的业务来说,我们只需要考虑将需要拆出来的业务代码想办法封装成一个组件就行,考虑它接受哪些参数,有哪些变化,是否接受请求,是否有对外的交互,是否需要对外暴露属性等等...
gulpfile.ts代码如下: // 打包方式:串行(series) 并行(parallel) import { series, parallel } from "gulp"; import { withTaskName,runTask } from "./utils" /** * 1. 打包样式 * 2. 打包工具方法 * 3. 打包所有组件 * 4. 打包每个组件 * 5. 生成一个组件库 * 6. 发布组件 */ export defau...
打包后页面打开空白可能是文件路径不对,修改vite.config.ts 文件里的 base 路径为 ./ 如果还是空白页面且没有报错,只是组件没有加载出来如下图: 这种情况是路由配置的错误,直接改一下 history 配置 再打包就可以打开页面了
base.ts: import axios from 'axios' const request = (option: any) => { return axios(option) } function Service(value: { namespace?: string; url?: string; prefix?: string }) { return function (target: any) { target.prototypspace = valuspace ...
二、打包分析 官网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,/...
使用vite创建, 选择vue 代码语言:shell AI代码解释 pnpmcreate vite 2. 项目结构 3. 编写代码 核心是main.js, 组件就用默认的HelloWorld.vue 代码语言:js AI代码解释 import{createApp}from'vue'importAppfrom'./components/HelloWorld.vue'functionrenderVueComponentToDOM(domElement){createApp(App).mount(domElem...
main.ts / main.js main.ts或main.js是整个Vue应用的起点。这个文件的主要职责是引导应用程序,包括创建Vue实例、挂载App组件、引入全局样式、配置路由、状态管理等。在使用Vite作为构建工具的项目中,main.ts也是Vite查找和打包的入口文件。 以下是一个简单的main.ts文件示例,它导入了Vue和App组件,并创建了一个Vue...
2.使用 rollup-plugin-visualizer(类似webpack的插件:webpack-bundle-analyzer) 进行打包分析,打包之后,会在根目录默认生成一个 report.html 文件 配置rollup-plugin-visualizer: 第一步安装:npm i rollup-plugin-visualizer -D 第二步配置: //vite.config.ts ...