位置: IT常识 - 正文

【vite·4】vite在多环境下的配置集成方案及defineConfig(非常详细)(vitem)

编辑:rootadmin
【vite·4】vite在多环境下的配置集成方案及defineConfig(非常详细)

推荐整理分享【vite·4】vite在多环境下的配置集成方案及defineConfig(非常详细)(vitem),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:virtute,vited,vitec,vite svelte,vite cli,vite svelte,vite cli,vitejte,内容如对您有帮助,希望把文章链接给更多的朋友!

vite的默认配置文件是vite.config.js,最基础的配置文件格式如下:

export default { // 配置选项};

我们也可以通过 –config 命令行选项指定一个配置文件,命令行输入: vite --config my-config.js

vite运行在node环境,为什么vite.config.js能够写成esmodule的形式? vite在读取vite.config.js时,会率先通过node解析文件语法, 如果发现你是esmodule规范会直接将你的esmodule规范进行替换变成commonjs规范

配置语法提示

我们采用vscode编译器增添vite配置时,编译器是没有任何提示的,这对我们很不友好! (下图的提示并不是vite的可选配置提示,是插件对js的通用提示)

webstorm有很好的语法补全功能,vscode没有如果使用vscode或者其他的编辑器, 想要编译器进行智能提示,需要做一些特殊处理

通过下面的两种配置,我们可以获得代码补全功能。

defineConfig

加上defineConfig,会惊奇的发现,配置项居然有代码提示了,真香!

jsdoc 注释法【vite·4】vite在多环境下的配置集成方案及defineConfig(非常详细)(vitem)

jsDoc是一个用于JavaScript的API文档生成器,官网:https://jsdoc.zcopy.site/

将配置写在viteConfig内并导出,然后再其上面写如下注释:

/** @type import("vite").UserConfig */

环境模式配置

webpack时代,基于不同的环境,开发者通常会设置不同的配置文件,如:webpack.dev.config、webpack.prod.config、webpack.base.config 等等。 vite中,基于不同环境设置不同配置,只需要导出这样一个函数:

export default defineConfig(({ command, mode, ssrBuild }) => { if (command === 'serve') { return { // dev 独有配置 } } else { // command === 'build' return { // build 独有配置 } }})在开发环境下 command 的值为 serve生产环境下为 command 的值为 build多环境配置集成的一种实现方式

同webapack配置一样,我们也可以定义多个配置文件,然后再vite.config.js中引入使用

import { defineConfig } from "vite";import viteBaseConfig from "./vite.base.config";import viteDevConfig from "./vite.dev.config";import viteProdConfig from "./vite.prod.config";export default defineConfig(({ command, mode, ssrBuild }) => { if (command === "serve") { return { // dev 独有配置 ...viteBaseConfig, ...viteProdConfig }; } else { // command === 'build' return { // build 独有配置 ...viteBaseConfig, ...viteDevConfig }; }});

vite.base.config.js代码如下,其余类似。

import { defineConfig } from "vite";export default defineConfig( {});多环境配置集成的策略模式写法

我们可以使用策略模式让代码变得更加高级

import { defineConfig } from "vite";import viteBaseConfig from "./vite.base.config";import viteDevConfig from "./vite.dev.config";import viteProdConfig from "./vite.prod.config";const envResolver = { // build: () => ({...viteBaseConfig,... viteProdConfig}) 这种方式也可以 // Object.assign中的{}是为了防止viteBaseConfig被修改。 build: () => Object.assign({}, viteBaseConfig, viteProdConfig), serve: () => Object.assign({}, viteBaseConfig, viteDevConfig),};export default defineConfig(({ command, mode, ssrBuild }) => { return envResolver[command]();});

Object.assign() Object.assign() 方法将所有可枚举属性从一个或多个源对象复制到目标对象,返回修改后的对象。 注意:该方法会修改源对象!

const target = { a: 1, b: 2 };const source = { b: 4, c: 5 };const returnedTarget = Object.assign(target, source);console.log(target);// expected output: Object { a: 1, b: 4, c: 5 }console.log(returnedTarget === target);// expected output: true多环境配置测试

我们在vite.config.js中根据不同环境写下提示信息

import { defineConfig } from "vite";import viteBaseConfig from "./vite.base.config";import viteDevConfig from "./vite.dev.config";import viteProdConfig from "./vite.prod.config";const envResolver = { build: () => { console.log("生产模式"); Object.assign({}, viteBaseConfig, viteProdConfig) }, serve: () => { console.log("开发模式"); Object.assign({}, viteBaseConfig, viteDevConfig) },};export default defineConfig(({ command, mode, ssrBuild }) => { return envResolver[command]();});

package.json中增加"build": “vite build”

"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "vite", "build": "vite build" },

命令行执行 npm run dev 命令行执行 npm run build

本文链接地址:https://www.jiuchutong.com/zhishi/283090.html 转载请保留说明!

上一篇:dm分区图解 电脑dm分区如何进行(dm分区工具图解教程)

下一篇:Linux做代理服务器实现步骤详解(代理 linux)

  • 电脑怎么截长图快捷键(电脑怎么截长图最简单方法)

    电脑怎么截长图快捷键(电脑怎么截长图最简单方法)

  • 红米k40游戏增强版屏幕材质(红米k40游戏增强版长宽)

    红米k40游戏增强版屏幕材质(红米k40游戏增强版长宽)

  • iphone13日历骚扰信息怎么删除(iphone日历骚扰信息)

    iphone13日历骚扰信息怎么删除(iphone日历骚扰信息)

  • iPhone怎么导出微信记录(iphone怎么导出微信聊天记录)

    iPhone怎么导出微信记录(iphone怎么导出微信聊天记录)

  • oppo手机正在运行的程序怎么设置(OPPO手机正在运行的服务)

    oppo手机正在运行的程序怎么设置(OPPO手机正在运行的服务)

  • 开热点会不会中病毒(开热点会不会中毒)

    开热点会不会中病毒(开热点会不会中毒)

  • 手机出厂时会有划痕吗(手机出厂时会有病毒吗)

    手机出厂时会有划痕吗(手机出厂时会有病毒吗)

  • 电动车充电器怕淋雨吗(电动车充电器怕冻吗)

    电动车充电器怕淋雨吗(电动车充电器怕冻吗)

  • 小米usbc和typec一样吗(小米usb c和type c区别)

    小米usbc和typec一样吗(小米usb c和type c区别)

  • 拼多多申请退款商家不处理,多久可以到账(拼多多申请退款后不寄回商品会怎样)

    拼多多申请退款商家不处理,多久可以到账(拼多多申请退款后不寄回商品会怎样)

  • 微信被加入黑名单后有啥显示(微信被加入黑名单发信息他能收到吗)

    微信被加入黑名单后有啥显示(微信被加入黑名单发信息他能收到吗)

  • 系统的根本属性(系统的最根本特征)

    系统的根本属性(系统的最根本特征)

  • 苹果xr夜里耗电严重(iphonexr夜晚待机耗电)

    苹果xr夜里耗电严重(iphonexr夜晚待机耗电)

  • mq8d2ch a是什么型号(mq8e2ch/a是什么机型)

    mq8d2ch a是什么型号(mq8e2ch/a是什么机型)

  • 华为vce aloo是什么型号(huawei vce-al00)

    华为vce aloo是什么型号(huawei vce-al00)

  • 苹果7怎么老是闪退(苹果7怎么老是显示无服务)

    苹果7怎么老是闪退(苹果7怎么老是显示无服务)

  • 快手通过关注页添加是什么意思(快手通过关注页添加我)

    快手通过关注页添加是什么意思(快手通过关注页添加我)

  • word参考文献标注怎么弄(word参考文献标号后有空白)

    word参考文献标注怎么弄(word参考文献标号后有空白)

  • 怎样把手机音乐下载到u盘(怎样把手机音乐下载到u盘上)

    怎样把手机音乐下载到u盘(怎样把手机音乐下载到u盘上)

  • wps表格查找功能在哪(wps表格查找功能不出来)

    wps表格查找功能在哪(wps表格查找功能不出来)

  • 计算器上的cnc键代表什么(计算器上键的介绍及使用)

    计算器上的cnc键代表什么(计算器上键的介绍及使用)

  • 苹果手机减弱动态效果是什么意思(苹果手机减弱动态效果关闭后模糊)

    苹果手机减弱动态效果是什么意思(苹果手机减弱动态效果关闭后模糊)

  • 三星手机如何截图(三星手机如何截图手机屏幕)

    三星手机如何截图(三星手机如何截图手机屏幕)

  • 鸿蒙系统手机功能设置知识汇总大全(鸿蒙 功能)

    鸿蒙系统手机功能设置知识汇总大全(鸿蒙 功能)

  • 【前端修炼之路】第一话 · 初识前端领域(前端高手进阶)

    【前端修炼之路】第一话 · 初识前端领域(前端高手进阶)

  • 政府收回土地补偿款是否缴纳土地增值税
  • 餐饮业厨房设备专票可以抵税吗
  • 房地产企业回迁房增值税
  • 施工企业的成本会计对象
  • 业务招待费税前扣除标准是
  • 受托代为投资账务处理
  • 转让固定资产发生的费用计入什么科目
  • 预缴企业所得税会计处理
  • 货币的兑换是怎么决定的
  • 事业单位收到借款分录
  • 成本大于收入可以吗
  • 以固定资产增资子公司 可以溢价么
  • 其他综合收益是利润表项目吗
  • 企业对外投资需要注意的事项
  • 增值税征收比例和征收方式
  • 企业间借款利息涉税处理
  • 酒店行业税负率怎么算
  • 全面推开营改增试点12366热点问题解答(一)
  • 员工报销费用
  • 收取客户税点怎么记账
  • 研发费用发票怎么入账
  • 应交增值税有哪些
  • 建筑公司采购制度和流程
  • 冲销货款的会计分录
  • 租赁合同法律风险
  • 报销伙食费的会计分录
  • 招投标公司需要什么条件
  • 会计交接的时候是不是有报税单
  • html中a标签的作用
  • 马蹄莲的养殖方法和注意事项视频
  • php中使用js
  • 提租补贴计入个税吗
  • php zend原理
  • node-
  • 税收返还会计处理办法
  • 织梦怎么样
  • 内账收入和成本怎样做
  • 工程提成会计分录怎么做
  • 公司收购股权交什么税
  • 土地增值税扣除项目税金包括哪些
  • 过了汇算清缴还能调整以前年度
  • sql dbo
  • 什么时候库存商品在贷方
  • 单位买车和个人买车交税有何不同
  • 人力资源劳务外包需要什么资质证书
  • 利润分配的账务处理视频
  • 水利建设基金应税项是什么
  • 其他应收款怎么冲平会计分录
  • 外币账户记账方法
  • 周转材料计入现金流量表
  • 饭店会计做账流程
  • 进口关税怎么算增值税
  • 会计基础知识必背100题
  • 播放器状态
  • 在linux系统中命令
  • rdesktop命令
  • win8.1怎么关机快捷键
  • linux系统bug
  • win10预览版和正式版
  • windows xp
  • centos查看具体版本
  • linux必学的60个命令及使用
  • win8.1开机进入桌面
  • linux配置ssh服务器 用户名
  • javascript的理解
  • opengl光照设置
  • android 启动器 设置
  • android toast位置
  • bootstrap css框架
  • android解析xml的方法中,将整个文件加载到内存
  • unity 3d online document
  • 轮廓理论
  • android StrictMode使用
  • jquery的实现原理
  • 国家税务局增值税查验平台
  • 燃气号如何查询
  • 开票日期是今年但是业务是去年
  • 如何给局长送点礼品
  • 如何在个税app中设置企业登录密码
  • 服务承诺口号八个字
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设