vue3.x+ts+vite2环境变量配置

更新日期: 2022-04-21阅读: 1.6k标签: Vite

在做项目环境变量配置前,可以先到官网回忆一下环境变量的基本使用, https://cn.vitejs.dev/guide/env-and-mode.html

一、环境模式

首先环境变量是可以分模式的,常用模式如下:

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

默认 dev 环境下使用 .env.development 环境变量配置, build 环境下使用 .env.production ,所以不需要在 package.json 中再指定模式了

"scripts": {
  "dev": "vite --mode development", // --mode development可以省略,运行 npm run dev 自动指定
  "build": "vue-tsc --noEmit && vite build --mode production", // --mode production可以省略,运行 npm run build 自动指定
  "preview": "vite preview"
},

--mode 一般在其他特殊自定义下指定使用。

二、环境变量分类

2.1 默认环境变量

  • import.meta.env.MODE: {string} 应用运行的模式
  • import.meta.env.BASE_URL: {string} 部署应用时的基本 URL
  • import.meta.env.PROD: {boolean} 应用是否运行在生产环境
  • import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)

2.2 应用级环境变量

以 VITE_ 开头,这样会被vite处理,如下:

.env.developlent

VITE_api_URL=/api/
VITE_LOCATION_ORIGIN=http://localhost:3000/

另外自定义的环境变量,还需要在 env.d.ts 中声明变量类型

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_TITLE: string
  readonly VITE_API_URL: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}

三、加载优先级

模式覆盖通用,如:在生产环境下, .env.production 中的同名环境变量会覆盖 .env 中同名配置,其他同理

四、环境变量使用

Vite把环境变量通过 import.meta.env 暴露出来,在 .vue 中使用方式如下:

<script setup lang="ts">
  console.log(import.meta.env)
</script>

但如果要在 axios 中使用就需要特别配置了,需要在 vite.config.js 中加载环境变量,我们可以像以下这种方式处理:

import { defineConfig, loadEnv } from 'vite'

// https://vitejs.dev/config/
export default ({ mode }) => defineConfig({
  define: {
    'process.env': loadEnv(mode, process.cwd())
  },
}

这样配置完成后就可以在 plugins 下 axios.ts 中使用了

const {
  VITE_API_URL
} = process.env

const instance = axios.create({
  baseURL: VITE_API_URL
});

export default instance


链接: https://www.fly63.com/article/detial/11364

Vite使Vue CLI过时了吗?

Vue 生态系统中有一个名为 Vite 的新构建工具,它的开发服务器比 Vue CLI 快 10-100 倍。这是否意味着 Vue CLI 已经过时了?在本文中,我将比较这两种构建工具

在vite2和Vue3中配置Mockjs

在 Vite2 与 Vue3 中使用Mockjs时有一些官方文档没有提到的注意点,特意做此记录。MockJS 依赖的安装,在 package.json 中设置环境变量,在 vite.config.js 中添加 mockjs 插件

Vite开发环境搭建

Vite现在可谓是炙手可热,可能很多小伙伴还没有使用过Vite,但是我相信大多数小伙伴已经在使用Vite了,因为是太香了有没有。可能在使用过程中很多东西Vite不是配置好的,并不像Vue-cli配置的很周全,那么今天就说一下如何配置开发环境

Vite开发快速入门

Vite (法语意为快速的,发音 /vit/) 是一种面向现代浏览器的一个更轻、更快的前端构建工具,能够显著提升前端的开发体验。除了Vite外,前端著名的构建工具还有Webpack和Gulp。目前,Vite已经发布了Vite2,Vite全新的插件架构、丝滑的开发体验

Vite状态管理

Vite是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。

vue3 vite 系统标题 系统名称统一配置

想要统一配置系统名称 或者其他的,需要在vue3中使用 vite 的环境变量;vite 的环境变量 需要创建两个文件(和 vite.config.js 文件同一目录)

你还不会写 vite 插件吗?没关系,我教你啊!

vite 其实就是一个由原生 ES Module 驱动的新型 Web 开发前端构建工具。vite 插件 就可以很好的扩展 vite 自身不能做到的事情,比如 文件图片的压缩、 对 commonjs 的支持、 打包进度条 等等。

新朝旧将 vite和webpack煮酒论英雄

我们见证了 webpack、Rollup 和 Parcel 等工具的变迁,它们极大地改善了前端开发者的开发体验。但当我们开始构建越来越大型的应用时,通常需要很长时间才能启动开发服务器

Vite多页面应用配置&使用vite-plugin-html向html模板注入数据或标签

在开发过程中,简单地导航或链接到 /nested/ - 将会按预期工作,与正常的静态文件服务器表现一致。也就是说,如果你的文件夹有如下层级:

使用Vite快速构建前端React项目

Vite是一种面向现代浏览器的一个更轻、更快的前端构建工具,能够显著提升前端开发体验。除了Vite外,前端著名的构建工具还有Webpack和Gulp。目前,Vite已经发布了Vite3

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!