在vite或者vue-cli中使用.env[mode]环境变量

这篇具有很好参考价值的文章主要介绍了在vite或者vue-cli中使用.env[mode]环境变量。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在项目中总会遇到一些默认的配置,需要我们配置到静态文件中方便我们去获取,这时候就可以用到这个.env环境变量文件,在cli创建的项目中顶层的nodejs会有一个process对象,这个对象可以根据不同的环境获取不同的环境配置文件,但是vite中获取变量的方式不一样。

创建变量文件.env.[mode]  

在vite或者vue-cli中使用.env[mode]环境变量

1.在vue-cli 中

   1.1创建

    注意:属性名必须以 VUE_APP_ 开头,如:VUE_APP_XXX

ENV='development'
# base api
VUE_APP_BASE_URL='www.baidu.com'
VUE_APP_BASE_NAME='VUE项目'

   1.2使用

可以在js文件中是用process.env来获取环境配置

let baseURL = process.env.VUE_APP_BASE_API;

2.在vite中

Vite内置了dotenv这个第三方库, dotenv会自动读取.env文件, dotenv 从你的 环境目录 中的下列文件加载额外的环境变量:

.env                     # 所有情况下都会加载
.env.[mode]         # 只在指定模式下加载 

默认情况下

  • npm run dev 会加载 .env 和 .env.development 内的配置
  • npm run build 会加载 .env 和 .env.production 内的配置
  • mode 可以通过命令行 --mode 选项来重写。

   1.1创建

为了防止意外地将一些环境变量泄漏到客户端,只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码

ENV='development'
# base api
VITE_APP_BASE_URL='http://10.243.11.35:7200/'
VITE_APP_BASE_NAME='vite项目'

   1.2使用

   Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使       用的内建变量: 

import.meta.env.MODE: {string} 应用运行的模式。
import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与import.meta.env.PROD相反)文章来源地址https://www.toymoban.com/news/detail-459254.html

到了这里,关于在vite或者vue-cli中使用.env[mode]环境变量的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • vue2、vue-cli4以及vue3、vite打包去掉console.log

    webpack4会自带terser-webpack-plugin插件。 vue.config.js文件 vue-cli chainwebpack配置 webpack 配置terser chain链式配置 vite.config.ts文件 Esbuild#drop:For example, you can mark console.log as pure using --pure:console.log. This will cause these API calls to be removed safely when minification is enabled. Vite esbuild配置 esbuild prue配置

    2024年02月10日
    浏览(93)
  • vue3自动引入插件unplugin-auto-import (vite搭建项目,vue-cli搭建项目两种方式)

    插件地址:https://github.com/antfu/unplugin-auto-import 如果安装了eslint,使用的ref、torefs等报错undefind如下图 需在2个地方vue.config.js ,.eslintrc.js文件做配置 代码:

    2024年02月13日
    浏览(60)
  • uniapp之通过vue-cli命令行创建Vue3/Vite版,JavaScript开发,引入uni-ui扩展组件

    注意: Vue3/Vite版要求 node 版本^14.18.0 || =16.0.0 如果使用 HBuilderX(3.6.7以下版本)运行 Vue3/Vite 创建的最新的 cli 工程,需要在 HBuilderX 运行配置最底部设置 node路径 为自己本机高版本 node 路径(注意需要重启 HBuilderX 才可以生效) HBuilderX Mac 版本菜单栏左上角 HBuilderX-偏好设置

    2024年02月12日
    浏览(62)
  • vue-cli4 配置不同开发环境打包命令

    为什么会需要配置多种环境变量? 在一个产品的开发过程中,一般来说都是会经历这么一个过程: 本地开发 → 测试版部署 → 测试 → 预上线 → 正式上线 。对应的每一个环节中的服务器地址,接口地址...都会不一样。那么我们需要怎么去处理这种情况。 #1. 创建文件 在

    2024年02月16日
    浏览(72)
  • 做法一: vue-cli(webpack)配置开发环境、测试环境、生产环境

            由于开发环境、测试环境、生产环境三者是放在不同的服务器导致请求的接口URL地址不同,所有需要配置根据不同的环境使用不同的服务器地址。 请先简单阅读一下官方文档,了解一下概念 1、根目录创建 .env.development 、 .env.test 、 .env.production 文件(开发、测试、生

    2024年02月07日
    浏览(69)
  • less中:export 无效问题,vue-cli中导出公共变量,js对象为空对象

    试例 解决方案 注:在vue-cli v5版本中requireModuleExtension是已经被移除了。在没有任何配置的情况下打印出来的就是一个空对象 通过阅读官方文档,发现可以根据约定将文件名改为.module.(css|scss|sass|less|styl(us)?)结尾,这样就可以识别出css module。 这里是将自己项目中的variables.le

    2024年02月13日
    浏览(78)
  • Webstorm+Nodejs+webpack+vue-cli+Git搭建vue环境

    此笔记归纳整理webstorm搭建vue项目,仅作记录使用。   因为版权问题,就不再细说了。   选择nvm的安装路径:   选择node的安装路径:    Win键+R键 ,输入cmd,然后回车,打开命令行界面   进入命令提示符窗口,输入以下命令,显示版本号,则安装成功。   在

    2024年02月15日
    浏览(82)
  • vue环境变量配置——process.env

    在用 vue 框架时,经常用到两种环境,一种是开发环境,就是本地开发时的环境,一种是生产环境,就是要发布到线上的环境。 平时开发是用生产环境的,如果发布到线上时,需要切换环境为线上。如果人为去切换也是可以的,但是会容易忘记,可以通过配置不同的运行命令

    2024年02月09日
    浏览(45)
  • vue - vue中的process.env.NODE_ENV和环境变量

    process.env 是 Node.js 中的一个环境对象。其中保存着系统的环境的变量信息。可使用 Node.js 命令行工具直接进行查看。如下: 而 NODE_ENV 就是其中的一个环境变量。这个变量主要用于标识当前的环境(生产环境,开发环境)。默认是没有这个环境变量的,需要自己手动配置。 在

    2024年02月14日
    浏览(46)
  • 使用vue-cli创建第一个vue项目

    命令提示符切换至需要创建项目的目录: 直接在路径 输入cmd 在按键盘的 enter键 打开的终端就直接切换到该目录下 (1)输入以下命令: vue create 项目名称 (2)我这里选手动选择,键盘 上下 按钮,选完后按 enter键 (3)我这里选Babel和CSS,键盘 上下 按钮,选中或取消选中按

    2023年04月17日
    浏览(64)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包