Vue3 Vite项目中如何配置环境变量？

2026-05-22 09:222阅读0评论SEO资源

内容介绍
文章标签
相关推荐

本文共计530个文字，预计阅读时间需要3分钟。

想统一配置系统名称或其他相关设置，需要在vue3中使用vite的环境变量。具体步骤如下：

1. 在项目根目录下创建文件：`.env.development`

2.在`.env.development`文件中添加以下内容：

VITE_APP_NAME=你的系统名称

3. 在`vite.config.js`文件中，确保使用了vite的环境变量：

javascriptimport { defineConfig } from 'vite';

export default defineConfig({ // ...其他配置 define: { 'process.env.VITE_APP_NAME': JSON.stringify(process.env.VITE_APP_NAME), },});

这样，在开发模式下，你的系统名称将会被统一设置。

想要统一配置系统名称或者其他的，需要在vue3中使用 vite 的环境变量
vite 的环境变量需要创建两个文件（和 vite.config.js 文件同一目录）
.env.development 这个文件在开发模式中使用
.env.production 这个文件在生产模式中使用
在 .env.development 文件中添加系统标题 (以开发模式为例)

#.env.development VITE_APP_TITLE=系统名称

在 vue 文件中调用

#login.vue <template> <span style="font-size: 20px; font-weight: 600">{{ title }}</span> </template> <script setup> //调用环境变量在 template 中使用 title const title = import.meta.env.VITE_APP_TITLE; ...

这样就完成了。

如果想要在index.html中使用环境变量需要按照以下方式配置

安装插件：vite-plugin-html

npm install vite-plugin-html -D

说明：-D 表示安装完成后将插件配置到 package.json 的 devDependencies 中

在 vite.config.js 中增加配置

import { defineConfig, loadEnv } from "vite"; import { createHtmlPlugin } from "vite-plugin-html"; //这个配置为了在html中使用环境变量 const getViteEnv = (mode, target) => { return loadEnv(mode, process.cwd())[target]; }; // vitejs.dev/config/ export default ({ mode }) => defineConfig({ plugins: [ vue(), HtmlPlugin({ inject: { data: { //将环境变量 VITE_APP_TITLE 赋值给 title 方便 html页面使用 title 获取系统标题 title: getViteEnv(mode, "VITE_APP_TITLE"), }, }, }), ], server: { }, });

在 index.html 中使用环境变量

<title><%- title %></title>

完成

标签：vue3 vite 环境变量想要