位置: IT常识 - 正文

vite.config.ts常规配置(publicPath)(vit详解)

编辑:rootadmin
vite.config.ts常规配置(publicPath)

推荐整理分享vite.config.ts常规配置(publicPath)(vit详解),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vite import.meta,vite import.meta,vi test.c,vi test.c,vite报错,vite import.meta,vit int,vi test.c,内容如对您有帮助,希望把文章链接给更多的朋友!

@vue.confing.js中的publicPath属性变为base属性 import { defineConfig } from ‘vite’ import vue from ‘@vitejs/plugin-vue’ // 单文件组件支持 /**

Vue 3 单文件组件支持:@vitejs/plugin-vueVue 3 JSX 支持:@vitejs/plugin-vue-jsxVue 2.7 支持:vitejs/vite-plugin-vue2Vue <2.7 的支持:underfin/vite-plugin-vue2 / import AutoImport from ‘unplugin-auto-import/vite’ // 使用后可以不手动引入ref reactive onMounted这些api import Components from ‘unplugin-vue-components/vite’ // vite的按需引入自定义组件库 // import { ElementPlusResolver } from ‘unplugin-vue-components/resolvers’ // ElementPlus import { NaiveUiResolver } from ‘unplugin-vue-components/resolvers’ // NaiveUi组件 import path from “path”; // 和NodeJS “path”模块一样 /*自定义组件自动引入 unplugin-vue-componentselement-plus 组件自动引入 unplugin-vue-componentsvue3等插件 hooks 自动引入 unplugin-auto-import/vitemessage, notification 等引入样式自动引入 vite-plugin-style-import / export default defineConfig({ // 需要用到的插件数组。Falsy 虚值的插件将被忽略,插件数组将被扁平化(flatten) plugins: [ vue(), AutoImport({ resolvers: [NaiveUiResolver()], imports: [ “vue”, { “naive-ui”: [ “useDialog”, “useMessage”, “useNotification”, “useLoadingBar”, ], }, ], }), Components({ resolvers: [NaiveUiResolver()], }), ], define: { “process.env”: {}, }, // 作为静态资源服务的文件夹 默认: public publicDir: “public”, /* 该目录中的文件在开发期间在 / 处提供,并在构建期间复制到 outDir 的根目录,并且始终按原样提供或复制而无需进行转换。 该值可以是文件系统的绝对路径,也可以是相对于项目的根目录的相对路径。 将 publicDir 设定为 false 可以关闭此项功能。 / // root: ‘’, // 项目根目录(index.html 文件所在的位置)可以是一个绝对路径,或者一个相对于该配置文件本身的相对路径。 // define: ‘’, // // mode: ‘’, //默认: ‘development’ 用于开发,‘production’ 用于构建; 在配置中指明将会把 serve 和 build 时的模式 都 覆盖掉。也可以通过命令行 --mode 选项来重写。 base: “./”, // 类似publicPath,'./'避免打包访问后空白页面,要加上,不然线上也访问不了 /*开发或生产环境服务的公共基础路径。合法的值包括以下几种: 绝对 URL 路径名,例如 /foo/ 完整的 URL,例如 https://foo.com/ 空字符串或 ./(用于嵌入形式的开发) / // dts: ‘./auto-imports.d.ts’, // 插件配置之后,运行代码时会自动在根目录下(通过dts配置可修改路径)生成一个auto-import.d.ts文件,需要将此文件添加到tsconfig.json中,否则在使用api时会提示未定义: // 如果报错__dirname找不到,需要安装node,执行npm install @types/node --save-dev // 这里需要始终使用绝对路径。相对路径的别名值会原封不动地被使用,因此无法被正常解析。 resolve: { alias: { “@”: path.resolve(__dirname, “src”), // 路径别名 // “@assets”: path.resolve(__dirname, “src/assets”), // “@components”: path.resolve(__dirname, “src/components”), // “@images”: path.resolve(__dirname, “src/assets/images”), // “@pages”: path.resolve(__dirname, “src/pages”), // “@store”: path.resolve(__dirname, “src/store”), }, extensions: [“.js”, “.json”, “.ts”, “.vue”], // 使用路径别名时想要省略的后缀名,可以自己 增减 }, // 全局引入less css: { preprocessorOptions: { less: { // modifyVars: { // hack: true; @import (reference) "${path.resolve("src/assets/css/global.less")}";, // }, // javascriptEnabled: true, charset: false, additionalData: ‘@import “src/assets/css/global.less”;’, }, }, }, // 打包配置 build: { outDir: “www.qe121.com”, // 打包生成文件的名称 assetsDir: “assets”, // 指定静态资源存放路径 sourcemap: false, // 是否构建要 source map 文件 minify: “terser”, // 混淆器,terser 构建后文件体积更小,‘terser’ | ‘esbuild’ chunkSizeWarningLimit: 1500, //chunk 大小警告的限制,默认500KB rollupOptions: { output: { // 最小化拆分包 manualChunks(id) { if (id.includes(“node_modules”)) { return id .toString() .split(“node_modules/”)[1] .split(“/”)[0] .toString(); } }, chunkFileNames: “js/[name].[hash].js”, // 用于命名代码拆分时创建的共享块的输出命名,[name]表示文件名,[hash]表示该文件内容hash值 }, }, terserOptions: { // 生产环境移除console打印 compress: { drop_console: true, drop_debugger: true, }, // 去掉注释内容 output: { comments: true, }, }, }, // 服务配置 server: { https: false, // 为 true 时启用 TLS + HTTP/2 open: true, // 为 true 时自动在浏览器中打开应用程序 cors: true, // 允许跨域 开发服务器配置 CORS。默认启用并允许任何源 port: 1019, // 端口号 指定开发服务器端口 strictPort: true, // 设为 true 时若端口已被占用则会直接退出,而不是尝试下一个可用端口 host: true, // 指定服务器应该监听哪个 IP 地址。 如果将此设置为 0.0.0.0 或者 true 将监听所有地址,包括局域网和公网地址。 headers: {}, // 指定服务器响应的 header。 origin: “http://127.0.0.1:1019”, // 用于定义开发调试阶段生成资产的 origin。 // base: ‘’, // 在 HTTP 请求中预留此文件夹,用于代理 Vite 作为子文件夹时使用。应该以 / 字符开始和结束。 // 代理配置 // proxy: { // “/api”: { // target: “”, // 后台接口 // changeOrigin: true, // secure: false, // 如果是https接口,需要配置这个参数 // // ws: true, //websocket支持 // rewrite: (path) => path.replace(/^/api/, “”), // }, // }, // 禁用或配置 HMR 连接(用于 HMR websocket 必须使用不同的 http 服务器地址的情况) hmr: { overlay: false, // 禁用开发服务器错误的屏蔽 /*当 server.hmr.server 被定义后,Vite 将会通过所提供的的服务器来处理 HMR 连接。如果不是在中间件模式下,Vite 将尝试通过已有服务器处理 HMR 连接。这在使用自签证书或想通过网络在某端口暴露 Vite 的情况下,非常有用。 / // server: {} , }, // 传递给 chokidar 的文件系统监听器选项 // watch: { // // 被监听的包必须被排除在优化之外, // // 以便它能出现在依赖关系图中并触发热更新。 // ignored: [‘!/node_modules/your-package-name/’] // }, // 以中间件模式创建 Vite 服务器 // middlewareMode: ‘ssr’, /*‘ssr’ 将禁用 Vite 自身的 HTML 服务逻辑,因此你应该手动为 index.html 提供服务。‘html’ 将启用 Vite 自身的 HTML 服务逻辑。/ fs: { strict: true, // 限制为工作区 root 路径以外的文件的访问 // allow: [‘…’], // 可以为项目根目录的上一级提供服务 /*当 server.fs.allow 被设置时,工作区根目录的自动检索将被禁用。限制哪些文件可以通过 /@fs/ 路径提供服务。当 server.fs.strict 设置为 true 时,访问这个目录列表外的文件将会返回 403 结果。/ deny: [“.env”, ".env.", “*.{pem,crt}”], // 用于限制 Vite 开发服务器提供敏感文件的黑名单。 }, }, // 引入第三方的配置 optimizeDeps: { include: [], // include: [‘your-package-name’], }, });
本文链接地址:https://www.jiuchutong.com/zhishi/288921.html 转载请保留说明!

上一篇:普利特维采湖群国家公园中的高架步道,克罗地亚 (© Alessandro Laporta/Offset by Shutterstock)(普利特维采湖群国家公园天气)

下一篇:支付宝小程序跳转第三方H5页面(支付宝小程序跳回app)

  • 钉钉打卡怎么改定位(钉钉打卡怎么改人脸识别打卡)

    钉钉打卡怎么改定位(钉钉打卡怎么改人脸识别打卡)

  • word绘图功能在哪里(word中的绘图工具在哪里)

    word绘图功能在哪里(word中的绘图工具在哪里)

  • realmex50pro有几种颜色呢(realmex50prozol)

    realmex50pro有几种颜色呢(realmex50prozol)

  • 倾听者m2和m2s区别(倾听者m2s最大支持tf卡)

    倾听者m2和m2s区别(倾听者m2s最大支持tf卡)

  • 微信删除后怎么恢复聊天记录(微信删除后怎么加回来不被发现)

    微信删除后怎么恢复聊天记录(微信删除后怎么加回来不被发现)

  • 怎么才能得到抖音卡(怎么才能得到抖音投稿同城推荐)

    怎么才能得到抖音卡(怎么才能得到抖音投稿同城推荐)

  • 别人发微信视频不弹出怎么办(别人发微信视频手机没反应)

    别人发微信视频不弹出怎么办(别人发微信视频手机没反应)

  • 怎么关闭qq顶上的小程序(qq怎么关闭顶部小程序功能)

    怎么关闭qq顶上的小程序(qq怎么关闭顶部小程序功能)

  • 风油精伤害手机屏幕吗(风油精对手机屏幕)

    风油精伤害手机屏幕吗(风油精对手机屏幕)

  • 罗技c270和c270i有什么区别(罗技c270上市时间)

    罗技c270和c270i有什么区别(罗技c270上市时间)

  • 呼叫转移短信也会转移吗(呼叫转移短信提醒号码)

    呼叫转移短信也会转移吗(呼叫转移短信提醒号码)

  • 安卓是哪个国家开发的(安卓是哪个国家的手机)

    安卓是哪个国家开发的(安卓是哪个国家的手机)

  • 电脑不用的时候需要拔掉电源吗(电脑不用的时候怎么设置休眠)

    电脑不用的时候需要拔掉电源吗(电脑不用的时候怎么设置休眠)

  • 无需合约版是全网通吗(无需合约版是什么版)

    无需合约版是全网通吗(无需合约版是什么版)

  • 桥接和路由的区别(桥接和路由哪个网速快)

    桥接和路由的区别(桥接和路由哪个网速快)

  • 苹果x隐藏功能4大功能(苹果x隐藏功能大全)

    苹果x隐藏功能4大功能(苹果x隐藏功能大全)

  • 花呗怎么申请商家收款码(花呗额度怎么申请)

    花呗怎么申请商家收款码(花呗额度怎么申请)

  • b站举报人别人知道吗(b站举报人别人怎么成功)

    b站举报人别人知道吗(b站举报人别人怎么成功)

  • 文件管理文档可以删吗(文件管理的文档)

    文件管理文档可以删吗(文件管理的文档)

  • rm格式的视频怎么打开(rm格式的视频文件)

    rm格式的视频怎么打开(rm格式的视频文件)

  • 三星手机可以下载两个微信吗(三星手机可以下载登记注册身份验证吗?)

    三星手机可以下载两个微信吗(三星手机可以下载登记注册身份验证吗?)

  • 512kbps是多少网速(512kbps等于多少m)

    512kbps是多少网速(512kbps等于多少m)

  • iPhone11pro怎么设置微信美颜(iphone11pro怎么设置来消息闪光灯)

    iPhone11pro怎么设置微信美颜(iphone11pro怎么设置来消息闪光灯)

  • gt1030显卡可以吃鸡吗(显卡gt10302g够用吗)

    gt1030显卡可以吃鸡吗(显卡gt10302g够用吗)

  • 苹果xsmax为什么总发烫(苹果xsmax为什么拍照好看)

    苹果xsmax为什么总发烫(苹果xsmax为什么拍照好看)

  • 怎么看苹果云盘照片(苹果云盘在哪里打开)

    怎么看苹果云盘照片(苹果云盘在哪里打开)

  • word背景色如何去掉(word里面背景色怎么设置)

    word背景色如何去掉(word里面背景色怎么设置)

  • 苹果手机怎么散热快(苹果手机怎么散热性能)

    苹果手机怎么散热快(苹果手机怎么散热性能)

  • Vue知识点汇总【持更】(vue知识点总结)

    Vue知识点汇总【持更】(vue知识点总结)

  • 情感计算——多模态情感识别(情感计算的应用)

    情感计算——多模态情感识别(情感计算的应用)

  • 企业以买一赠一
  • 个人独资企业是有限责任还是无限责任
  • 固定资产新规则
  • 增值税发票注明金额是含税还是不含税
  • 怎么用两台电脑测试网线
  • 上期留抵税额会计分录
  • 增值税纳税申报表附列资料(三)
  • 第一次购买税控盘
  • 去年的费用票会计分录
  • 2019年残保金申报时间
  • 金融资产的划分标准以及相关的处理怎么做
  • 物流辅助服务属于什么项目
  • 税控盘减免税有时间限制吗?
  • 全额抵减税控盘分录
  • 运输费计入采购成本的分录
  • 资产减值准备的会计科目
  • 跨年错误分录能红冲吗
  • 有票据的福利费是不需要职工薪酬科目过渡吗
  • 2020年购进农产品的扣除率
  • 不征税收入税屋
  • 水利基金减免政策2022
  • 纳税人税号后面的数字
  • 纳税服务一体化综合监督工作情况报告
  • 什么情况下要办居住证
  • 小规模纳税人租金收入增值税税率
  • 公户转账备注写错会查吗
  • 备案类减免税又做费用了
  • 收到不开票的返利如何记账?
  • 经营性现金净流量是什么意思
  • 其他应付转到其他应收
  • 转贴现属于什么市场
  • 确认无法回收的应收账款会计分录
  • 商品残次品怎样定义
  • 租赁费摊销计入什么科目
  • 基建项目类型填什么
  • win11 老机器
  • 安全库存的三种算法
  • php数组函数面试题
  • 穿墙路由器怎么选择
  • 弥补以前年度亏损最多几年
  • 材料退款会计分录
  • php中td
  • 土地增值税清算管理规程
  • 商铺转让权是什么意思
  • 发票开具时限是怎么规定的
  • phpajax技术
  • 四川成都熊猫基地介绍
  • JavaScript 30 JavaScript 日期格式
  • pyqt 菜单
  • php手机验证码验证
  • 专项扣除影响实绩吗
  • 国税里货币资金怎么算
  • 财务报表中存货为负数是什么意思
  • 个税如果是公司怎么申报
  • 收到营业外收入政府补贴的会计分录
  • 农产品加工会计分录
  • 计提的管理费用要结转吗
  • 营业费用占比
  • 企业所得税季报与年报的关系
  • ubuntu16.04火狐打不开网页
  • 怎么优化win10系统
  • win8怎么关闭电脑
  • win10预览版21301bug
  • w7开机界面
  • el-menu-item
  • unity3ds
  • jquery基本操作
  • shell脚本总结
  • javascript产生随机数
  • jQuery+formdata实现上传进度特效遇到的问题
  • android内存占用分析
  • android sdk api文档
  • 劳动监察执法机构是什么
  • 门诊看病记录怎么查
  • 增值税留底抵欠如何处理
  • 荒野大镖客2焦煤油与贪婪怎么开启
  • 江苏网上税务局官网登录
  • 涉嫌虚开增值税专用发票罪
  • 教育培训行业的前景
  • 企业筹建期间发生的费用应计入什么账户
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设