前端项目集成Vite配置一览无余

这篇具有很好参考价值的文章主要介绍了前端项目集成Vite配置一览无余。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vite配置文件

  • 默认指定vite.config.js
  • 自定义指定vite --config 自定义名称.js

Vite相关命令

  • 查看Vite有哪些命令npx vite -help
--host [host]// 指定域名
--port <port>// 指定端口
--https // 使用 TLS+HTTP/2
--cors // 可以跨域
--open [path] // 启动自动打开服务器
--stictPort // 如果指定端口被使用退出程序
--force // 强制Vite重新执行预构建,忽视缓存
--config | -c<file> // 指定vite的配置文件
--base path // 指定url读取文件基本路径
--clearScreen // 日志记录时,是否清屏
--logLevel | -l <level> // 指定日志等级:error|info|silent|warn
--debug | -d<feat>// 获取调试日志
--filter | -f <filter> // 过滤调试日志
--mode | -m <mode> // 设置env模式
--help | -h // 获取vite帮助信息
--version | -v // 获取vite版本信息 

什么时候需要使用–force?

Vite缓存分为两部分:

文件系统缓存:Vite会将预构建的依赖缓存到node_modules/.vite,package.json的dependencies字段和依赖lock文件,或者vite.config中相关字段配置过的,这些文件发生变化,vite就会重新构建,强制执行可以通过--force手动删除.vite目录

浏览器缓存:解析后的依赖请求会以http头max-age=max-age=31536000,immutable 强缓存,提高开发页面重载性能。

  • vite命令有哪些
vite [root]// 启动以配置文件root为入口的项目开发环境
vite serve // 启动以配置文件root为入口的项目开发环境
vite build [root] // 打包以配置文件root为入口的文件为生产环境文件
vite optimize [root] // 预构建生产环境
vite preview [root] // 构建一个本地预览静态生产环境 

preview是没有热更新的,当程序修改不会实时更新页面,需要重新执行命令。因为这个环境是生产环境,类似于上线项目,需要重新构建才能获取修改的功能。

  • pageage.json文件里配置vite命令

–noEmit的作用是只进行检查,不进行编译输出,这个属性也可以在tsconfig.json文件中指定;–open项目启动自动打开浏览器。

"dev": "vite --open",
"serve": "vite serve",
"build": "vue-tsc --noEmit&& vite build",
"staging": "vue-tsc && vite build --mode development",
"preview": "vue-tsc && vite preview", 

配置环境模式

默认环境:当pageage.json中的script字段里的命令执行了vite servevite,vite默认是开发环境(development),当执行了vite build命令,vite默认环境为生产环境(production)。注意地,当执行地是vite preview命令,vite默认环境也是生产环境,因为这个命令主要是创建一个能在本地执行的生产环境。JavaScript模块有一个暴露特定上下文元数据属性的对象(import.meta),这个对象包含了当前模块的信息,对象里有三个属性:env(环境变量)resolveurl(当前模块加载路径),因为在main.ts打印的信息,所以这里获取的路径是src/main.ts。

在库模式下,也就是打包为一个库供其他开发人员下载引用的情况下,所有import.meta.env.*的用法在构建时会被静态替换,也就是使用的时候必须按 import.meta.env.BASE_URL 的原样出现(例如 import.meta.env['BASE_URL'] 是无效的)。但process.env.*不会被替换,库的使用者可以动态修改它。如果不希望这样做,可以在配置中配置:

define:{` 'process.env.NODE_ENV': '"production"'`;
} 
vite base配置,前端
// main.ts
console.log(import.meta); 

其中的env环境变量默认也有5个属性:BASE_URL(url公共路径)、DEV(是开发模式)、PROD(是否生产模式)、mode(环境模式)、SSR(是否服务器渲染)。当项目还配置有自定义环境变量时,env环境中自定义变量也会带上的。

注意:如果自定义环境变量前缀必须为**VITE_**因为vite配置文件中的envPrefix属性值默认为VITE_。如果想改变成自定义,在配置文件中必须配置envPrefix。

自定义环境:通过创建相应模式的文件。文件名格式如下:

.env// 所有模式都会加载
.env.local // 所有模式都会加载,但会被git忽略
.env.[mode].local // 只有特定模式会加载,但会被git忽略
.env.[mode] // 只有指定模式会加载,注意.env.production优先级比.env高 

配置指定环境模式:通过在vite.config.js文件中的基本配置中的mode属性指定,在这里指定会覆盖掉vite serve 、vite build中的默认mode模式,注意地,这个vite preview中mode不会被覆盖,还有如果在命令中指定mode,比如vite serve --mode production,这样也不会被配置文件中地mode覆盖,也就是命令行指定mode优先级最高

兼容设置

模块导入兼容:支持原生ESM script标签、原生ESM 动态导入。

// vite.config.js
build:{target:'es2015',// 支持es6文件
} 

浏览器兼容:兼容低版本浏览器,需要安装:yarn add @vitejs/plugin-legacy -D vite.config.js中的plugins配置:

// vite.config.js
import legacyPlugin form '@vitejs/plugin-legacy'

plugins: [legacyPlugin({targets:['chrome 52'], // 需要兼容的目标浏览器列表,可以设置多个additionalLegacyPolyfills:['regenerator-runtime/runtime'] // 面向IE11时需要此插件})
] 

项目适配处理

对样式的处理

预处理器的处理:由于Vite内置了对预处理器的支持,使用预处理器只需要安装对应的预处理器就可以,再也不需要安装相应预处理器加载器了,也不需要在vite配置了。比如使用less预处理器,这里只需要下载less就行。

css Modules:在不同模块中定义相同类名,会导致样式被覆盖,这时候就要用到CSS module。以.module.css结尾的文件都会被认为是一个css modules文件。导入这样文件会返回一个相应对象。这样就不会产生样式冲突被覆盖,因为每一个module都是一个独立css文件,也就是模块化。

/* example1.module.css */
.exampleClass{color:green;
}
/* example2.module.css */
.exampleClass{color:blue;
} 
// main.ts
import example1 from '@/common/styles/example1.module.css'
import example2from '@/common/styles/example2.module.css'
console.log(example1.exampleClass); // _exampleClass_16yyc_1
console.log(example2.exampleClass); // _exampleClass_tc6yz_1 

Vite中css modules配置有5个属性:

  • localsConvention:模块化后的css类名命名规则,驼峰还是划线* scopeBehaviour:配置当前模块行为是模块化还是全局化(标签上带有hash就是开启了模块化)有点类似是否style标签是否配置了scoped,如下图中去掉scoped就是全局化了,去掉scoped标签上就没有data-v-hash值。* vite base配置,前端
:root{--color:green;
}

.example{color:var(--color,blue);/* 找不到--color这个变量就是使用后面的值*/user-select: none;
}
/*
安装了postcss-preset-env ,会自动加上前缀
 -webkit-user-select: none; 
 -moz-user-select: none; 
 user-select: none;
*/ 

Vite中配置css:

css: {modules: {localsConvention:'camelCaseOnly',scopeBehaviour:'local',generateScopedName:'[name]_[local]_[hash:5]',hashPrefix:'',globalModulePaths:[]},postcss: {plugins:[postcssPreset()],},preprocessorOptions: {less: {additionalData: '@import "./src/common/styles/index.less";',},},devSourcemap: true,// 开发过程中是否启用css sourcemap
}, 

对typescript处理

  • 安装依赖
yarn add typescript -D // 安装typescript
yarn add vite-plugin-checker -D // ts代码检查插件 
  • vite配置
plugins: [checker({typescript:true
})], 
  • tsconfig.json配置:在 tsconfig.json 中的 compilerOptions 下设置 "isolatedModules": true。如此做,TS 会警告你不要使用隔离(isolated)转译的功能。因为esbuild 只执行没有类型信息的转译,它并不支持某些特性,如 const enum 和隐式类型导入。

对静态资源处理

  • vite对静态资源的处理大大提供了引入格式的支持,通过对引入路径添加参数后缀,资源引入为url(?url)、显示url引入、导入脚本为worker(?worker或?sharedworker)、将资源引入为字符串(?raw)。
import Worker from './worker?worker' // 引入为一个worker
import imgUrl from './assets/316149.jpg' //引入为一个资源路径 ,imgUrl的值为/src/assets/316149.jpg
import assetAsURL from './assets/asset.js?url' //引入资源为url, assetAsURL的值为/src/assets/asset.js
import assetAsstring from './assets/asset.js?raw' //引入资源为字符串,这里assetAsstring的值为js文件所有内容的字符串 

对JSON文件导入处理

Vite中提供了对JSON文件解析的支持,当我们引入json文件的时候,Vite会帮我们转化一下JSON格式为对象格式。

// {"a":"1"}
import jsonFile from './assets/example.json'
console.log(jsonFile);// {a:"1"} 

对Vue、React处理

如果在Vue或React项目中使用Vite我们需要引入相应插件适配对应框架:如

// Vue3:@vitejs/plugin-vue
// Vue3 JSX:@vitejs/plugin-jsx
// Vue2.7:@vitejs/vite-plugin-vue2
// Vue<2.7:underfin/vite-plugin-vue2

// React:@vitejs/plugin-react 

常见基本配置

defineConfig的配置参数格式:对象、promise回调函数、配置方法。当defineConfig为配置方法时,它的参数为一个包含三个属性的对象:command(执行命令,有serve|build)、mode(环境模式)、ssrBuild(是否为服务器渲染构建)。在Vite配置中如果有些配置需要通过command或mode来控制时,这个配置方法就使用的上了。

// __dirname需要安装@types/node
// 也可以使用process.cwd() 代表程序执行目录,也就是项目根目录
const resolve = (dir: string) => path.resolve(__dirname, dir);
export default defineConfig(({ command, mode }) => {return { // Vite配置 root: './',// 入口文件位置,如index.html base: './',// 启动服务公共路径 publicDir: resolve('public'),// 静态资源路径 mode: 'production', // 指定mode,会覆盖掉serve和build默认的mode cacheDir: 'node_modules/.vite',// 默认vite缓存路径 logLevel: 'warn',// 控制台输出的级别,error|info|silent|warn 默认 info 那么所有的日志都会打印出来 esbuild:{jsxFactory: 'h',jsxFragment: 'Fragment' 以上为自定义JSX// ESbuild会被应用在 ts、jsx、tsx 文件,以下选项对要处理的文件类型进行配置include:string | RegExp | (string | RegExp)[]exclude:string | RegExp | (string | RegExp)[]jsxInject:`import React from 'react'`// 自动为每一个被 ESbuild 转换的文件注入内容}	 clearScreen: true,// 控制台是否清屏,最好不要设置,设置会屏蔽掉一些关键终端信息 envDir: '',// 加载存放.env文件的目录 envPrefix: 'VITE_',// 默认VITE_, 设置环境变量的前缀 appType: 'spa',// 应用种类 spa | mpa | custom assetsInclude: [''],// 支持的其他类型文件都可以在这里找到 plugins: [vue(),checker({typescript:true})], css:{}, resolve: { alias: { "@": resolve('src'),// 简化引用路径,用@代替 }, dedupe: [],// 强制Vite始终将列出的依赖项解析为同一副本(从项目根目录) conditions: [],// 解析pageage.json中情景导出时的其他允许条件,如exports字段中的import和require为情景 mainFields: [],// 解析包的入口点时尝试的字段列表 extensions: [],// 导入时想要省略的扩展名列表 preserveSymlinks: false,// },},json: {namedExports: true,// 是否支持从.json文件中进行按名导入stringify: false,// 导入的json转换为export default JSON.parse("...")},// 服务器相关server:{....//服务器代理proxy: {'/api': {target: 'http://127.0.0.1:2022',// changeOrigin: true,// 代理时,host默认浏览器的host,为true,host为target的值// rewrite:path=>path.replace(/^\/adc/,'')// 重写url路径 } } ...},build: {manifest: false,// 是否生成一个 manifest.json 的文件在assets目录下target: 'modules',outDir: mode === 'staging' ? 'bundle' : 'dist',modulePreload: true,// 是否动态引入polyfill,需要引入兼容性相关的文件assetsDir: 'assets',// 指定打包生成静态资源的存放路径assetsInlineLimit: 4096,// 默认4kb 配置图片编译base64时大小,大于以原文件引入,小于会直接编译chunkSizeWarningLimit: 500,// 打包文件超大小警告显示,默认500kbsemptyOutDir: true,// 构建时是否清空OutDir,再把新构建的文件放进去watch: [''], // 监听文件变化,如果启动build不会退出程序,sourcemap:false,// 构建后是否生成 source map 文件....
},ssr:{},// 服务器渲染配置preview:{},// 预览生产环境配置worker:{},// worker线程相关配置optimizeDeps:{},// 依赖优化配置
}) 

最后

最近还整理一份JavaScript与ES的笔记,一共25个重要的知识点,对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识,提升工作效率。
vite base配置,前端
vite base配置,前端
vite base配置,前端
vite base配置,前端

有需要的小伙伴,可以点击下方卡片领取,无偿分享文章来源地址https://www.toymoban.com/news/detail-776682.html

到了这里,关于前端项目集成Vite配置一览无余的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第十二章 常用工具函数 (Utils配置)

    在项目开发中,我们经常会使用一些工具函数,也经常会用到例如 loadsh 等工具库,但是这些工具库的体积往往比较大,如果项目本身已经引入了这些工具库,那么我们就没有必要再引入一次,所以我们需要自己封装一些工具函数,来简化我们的开发。 在 src/utils 目录下创建

    2024年02月20日
    浏览(62)
  • 现有的vue3+ts+vite项目集成electron

    Electron是使用JavaScript,HTML和CSS构建跨平台的桌面应用程序框架。 Electron兼容Mac、Windows和Linux,可以构建出三个平台的应用程序。 安装依赖 原来有一个vue3+ts+vite+pnpm的项目,其中sub-modules是子项目,web是主入口项目,项目结构如下: 需要将其转换成Electron项目,只需要在原来

    2024年02月12日
    浏览(67)
  • vue3+vite项目集成mars3d

    创建一个项目 yarn create vite // vue - ts 安装依赖 yarn add vite-plugin-mars3d -D yarn add mars3d 控制台警告 warning \\\" mars3d@3.5.0\\\" has unmet peer dependency \\\"@turf/turf@^6.5.0\\\". warning \\\" mars3d@3.5.0\\\" has unmet peer dependency \\\"mars3d-cesium@~1.103.1\\\". 安装 yarn add  @turf/turf mars3d-cesium 修改 vite.config.ts 修改srcApp.vue 就可

    2024年02月15日
    浏览(48)
  • docker打包vue vite前端项目

    (如若提供一些帮助,请帮忙点个赞) 1.打包时将测试删除 2.修改配置 3.打包项目 npm run build 显示成功(黄的也不知道是啥) 打包好的前端文件放入 4.配置 default.conf 5.配置dockerfile 6.进入你的文件夹下面 我的是 /root/206/web docker build -t web:v1 . 注意后面的 . 点 7.运行 docker run -it -

    2024年02月07日
    浏览(35)
  • vue3+vite+ts项目集成科大讯飞语音识别(项目搭建过程以及踩坑记录)

    🐱 个人主页: 不叫猫先生 🙋‍♂️ 作者简介:前端领域新星创作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫系列专栏:vue3从入门到精通、TypeScript从入门到实践 📢 资料领取:前端进阶资料以及文中源码可以找我免费领取 🔥 前端

    2023年04月09日
    浏览(49)
  • Vite + Vue3 实现前端项目工程化

    Vue3 发布至今,周边的生态、技术方案已足够成熟,个人认为新项目是时候切换到 Vite + Vue3 了。今天就给大家操作一下这种技术方案实现前端工程化。 数字化管理平台 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus Vue权限系统案例 个人博客 通过官方脚手架初始化项目 第一种方式,这是使

    2024年02月03日
    浏览(74)
  • Vite 配置代理 Proxy,Vue配置代理,解决前端跨域

    我们在做项目的时候经常会遇到跨域的问题,之所以会出现跨域问题是因为浏览器的同源策略,即协议、域名、端口需要一致,才可以访问服务端的资源。当一个请求地址(服务端的地址)的协议、域名、端口三者之间任意一个与当前页面地址(前端页面地址)不同即为跨域

    2024年02月17日
    浏览(55)
  • Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化

    我在这里直接是通过vite提供的默认模板来创建一个vue3 + ts的项目。这里可以cmd,然后npm -v来查看版本。 这样一个vue3 + ts的项目就创建好了,使用vscode打开该项目,然后执行 yarn 安装依赖 依赖安装完成后,执行   yarn dev  启动项目就可以在浏览器中正常访问了。   初始化

    2024年01月24日
    浏览(89)
  • vite 创建vue3项目,使用 Prettier 统一格式化代码,集成 ESLint、Stylelint 代码校验规范

    在团队开发中,保持代码风格的一致性和代码质量的高度,对于项目的可维护性和可读性非常重要。为了实现这一目标,我们可以使用工具来自动格式化代码并进行代码校验,在开发过程中捕获潜在的问题,并提供修复建议。 本示例中,我们将使用 Vite 来创建一个新的 Vue

    2024年04月28日
    浏览(61)
  • electron+vue3全家桶+vite项目搭建【六】集成vue-i18n 国际化

    已发现 9.2.2版本的vue-i18n 如果使用cnpm安装,打包会报错,使用npm或者pnpm安装依赖没有问题 如果需要多语言支持,那么最好在项目搭建之初我们就集成好国际化 vue i18n官网 demo项目地址 关于多窗口国际化不同步更新状态的问题解决方案 1.我们现在src下面创建locals目录,里面创

    2023年04月12日
    浏览(88)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包