vite的配置

阅读数:123 评论数:0

跳转到新版页面

分类

html/css/js

正文

一、概述

官方文档：https://cn.vitejs.dev/config/

二 共享配置

1. resolve.extensions

import HelloWorld from '@/components/HellowWorld'

这在vite+vue3中会报错，这是因为vite已不再默认忽略.vue扩展名．

可以通过resolve.extensions进行配置．

默认： ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']

导入时想要省略的扩展名列表。注意，不 建议忽略自定义导入类型的扩展名（例如：.vue），因为它会影响 IDE 和类型支持。

三、环境变量

import.meta.env.MODE: {string} 应用运行的模式
import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
import.meta.env.PROD: {boolean} 应用是否运行在生产环境
import.meta.env.DEV: {boolean} 应用是否运行在开发环境

1、设置环境变量

需要我们设置.env文件

VITE_BASEURL=nf-rollup-ui-controller

需要使用 VITE_ 开头

.env 所有情况下都会加载
.env.local 所有情况下都会加载，但会被 git 忽略
.env.[mode] 只在指定模式下加载
.env.[mode].local 只在指定模式下加载，但会被 git 忽略

然后在package里面设置mode

  "scripts": {
    "dev": "vite",
    "build": "vite build --mode project",
    "lib": "vite build --mode lib",
    "libdts": "vue-tsc --declaration --emitDeclarationOnly ",
  },

build 命令后面的 --mode project 表示，需要使用 project 模式打包项目，对应的是 .env.project 文件。

lib 命令后面的 --mode lib 表示，需要使用 lib模式打包项目，对应的是 .env.lib 文件。

这样我们可以根据不同的命令，使用不同的模式，加载对应的.env文件，得到具体的环境变量。

 

相关推荐
webpack和vite的比较
一、概述 都是现代化打包工具 二、对比 1、底层语言 从底层原理上来说，Vite是基于esbuild预构建依赖。而esbuild是采用go语言编写，因为go语言的操作是纳秒级别，而js是以毫秒计数，所
vite+vue3+pinia+pnpm+element-plus开发记录
一、使用pnpm新建项目 可以使用npm 或yarn或pnpm来初始化Vite项目 pnpm create vite xxx(项目名称) #选择vue #选择js cd xxx (进入项目目录) #安
vite项目打包后浏览器的兼容问题
一、问题描述 vite+vue3项目开发完以后，你会发现打包后的项目运行在新版浏览器可以正常显示，但运行在一些版本比较老的浏览器如 Chrome < 23、Firefox < 21和IE等浏览器上时显
vite scss+mixin的使用
一、概述 sass提供了变量、嵌套、混合、志入等高级功能，强化了css的功能，编写css更便捷，功能更强大。 1、scss文件命名（前下划线） 在 SCSS 文件命名约定中，文件名前的下划线（_）有特
vite3+vue3打包优化
一、build视图分析依赖文件 分析项目中的文件大小及引用情用情况，是优化前的重要一步，从而采取文件分包、cdn引入等相关技术。 Rollup Plugin Visualizer是一个依赖分析插件，它
vite组件项目打包
一、概述 Vite 是一个现代化的前端构建工具，它提供了快速的冷启动、即时模块热更新和真正的按需编译等特性。 二、Vite构建组件项目 1、配置vite.config.js 在你的项目根目录下，确保你
VitePress
一、概述 VitePress是一个基于Vite和Vue的静态站点生成器，它通常用于编写文档。 二、使用方法 要在 VitePress 中配置组件文档，你需要遵循以下步骤： 1、安装VitePress
vue3 vite组件库中如何正确引用静态资源
方法一、使用new URL 在 Vite 中，你可以使用 new URL 的方式来引用静态资源，这样 Vite 会处理资源的路径，并且在构建时会将资源复制到输出目录： <script setup> c
vite打包时解决依赖冲突
shamefully-hoist=true 是一个在 Vue 3 项目中使用 Vite 时的配置选项。这个选项用于解决某些情况下的依赖冲突问题。 在 Vue 3 项目中，你可以在 vite.confi
vite-plugin-inspect插件
一、概述 vite-plugin-inspect 是一个用于 Vite 的调试插件，它允许开发者检查 Vite 项目中的内部模块图和插件的输出。这个插件可以帮助你理解 Vite 是如何转换和优化你的代