位置: 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)

  • 向个人提供居住证明
  • 借款合同怎么做
  • 普通发票忘记开数量和单价可以用吗
  • 经营范围没有的可以开票吗
  • 利润分配在利润表里填哪一项
  • 核定征收率怎么算的
  • 个税是否可以跨区缴纳
  • 暂估资产会计处理
  • 其他综合收益税后净额影响净利润吗
  • 筹办期的工资费用是什么
  • 红字发票是否需要写进出仓单里
  • 招标代理服务费收费标准2023
  • 公司章程上的出资时间2050年
  • 预付账款损失的账务处理如何编制呢?
  • 哪些可用商业汇票结算?
  • 当期应税销售收入是含税还是不含税
  • 合伙企业可以弥补以前年度亏损吗
  • 从支付宝里可以查出结婚个人信息吗
  • 跨年度租金收入怎么算
  • 支付境外个人佣金
  • 固定资产处置如何入账
  • 机票抵扣增值税需要什么凭证
  • 经营终止前企业资质变更
  • 个人收到支票如何做账
  • 已完成认证
  • 资产负债率是用年初和年末数吗
  • 无法设置面容id怎么办
  • 总公司中标分公司结算可以吗
  • 什么是票据权利?票据权利的内容有哪些
  • 电脑找不到ie浏览器
  • 王者荣耀中钟馗怎么出装
  • 商贸企业税收优惠政策
  • 农产品销售发票抵扣政策
  • php如何提高程序运行效率
  • thinkphp invoke
  • 增值税普通发票和专用发票有什么区别
  • 企业投资入股要交企业所得税吗
  • 没有利润,能否开发票
  • 计提工资个人所得税账务处理
  • 大数据实时数仓
  • 基于stm32的飞行器
  • tomcat服务器在哪个位置
  • 用python编写素数
  • php计时函数
  • 个人税收收入退税政策
  • 代扣代缴个人社保账务处理
  • 为什么费用报销先由主管部门审批在由财务审核
  • 企业借入长期借款的用途主要有
  • 开票人是管理员可以报销吗
  • 解决掉发的有效方法
  • 打开access自动弹出窗体
  • 结转成本时库存商品是负数
  • 开发成本期末有余额吗
  • 货款发票如何入账
  • 税盘进项税额怎么做
  • 工程检测单位
  • 教育局可以接受捐赠吗
  • 半成品是指正在各生产阶段加工的产品
  • 支付技术转让费所得税处理
  • 工程费用科目
  • 费用报销有哪些
  • windows禁止安装
  • 证书登录什么意思
  • 升级到xp系统以后怎么办
  • mac的itunes怎么下载歌曲
  • dl是什么文件
  • win8iis安装配置
  • 原生js实现仿苹果Siri语音助手特效动画
  • PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
  • shell中管道的作用
  • JSONLINT:python的json数据验证库实例解析
  • cmd pushd
  • u3d unity3d
  • 发票汇总表怎么计算
  • 航天金税开票软件服务费可以抵扣税款吗
  • 拆迁房抵税政策
  • 电子发票专用章怎么设置
  • 火灾损失进项税额怎么处理
  • 出口退税额与出口退税收入
  • 土地分割抵押 如何实现抵押权
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设