vite+vue3 配置生产与开发环境.env文件

最新推荐文章于 2024-03-21 10:54:02 发布
最新推荐文章于 2024-03-21 10:54:02 发布
阅读量897 收藏 1
点赞数
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xianyus4mA/article/details/129613757
版权

        在vue项目开发中难免会遇到测试环境与本地开发环境请求地址不一致的情况,如果每次都在打包之前手动切换请求路径就会比较麻烦,而且有时候易忽略这个更改,从而导致我们项目上线之后出现一系列的bug,所以我们就需要配置.env文件来自行切换请求时的地址.

        本篇文章主要来讲vite中使用.env文件的不同之处,在webpack中我们配置env文件后要引用文件中的数据和配置的话只需要使用process.VUE_APP_配置项名即可,但是在vite中我们则需要使用

import.meta.env.VITE_API_配置项名,!!!注意:一定要使用import.meta.env来引入如果使用传统的process引入是无效的,并且.env文件内的配置项名一定要以VITE_API_开头否则vite不会识别,这两者必须同时注意,否则就会导致配置的env文件无效,或者出现我明明配置了为什么不生效这种疑问.

 

楼主配置的跨域

 

 

cyl就是CYL啊
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs + Express + postgresql接口
04-10
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs + Express + postgresql接口 预览:http://dongnan185.com:8083/videos/vue3.mp4 一共两个包： 一个接口包 连的本地postgresql 表及信息有截图 库自己装 一个vue包 vite+vue3+ts+eleplus 配置了router vuex axios postcss-px-to-viewport界面自适应 env prod环境等 启动:均是 npm i npm start 仅供学习哈 也在慢慢完善中
vite、mode如果为production打包后 .env.production 中 VITE_API_DOMAIN变量作为API地址吗
東方幻想郷的博客
03-05 537
请注意，这只是设置环境变量的方式，并不会自动地去执行任何对应于这个地址的后端项目的打包。通过为不同的环境（如开发环境、生产环境等）设置不同的。前端项目打包时使用这个地址，仅仅是告诉前端代码应该向哪个服务端发送请求。文件，你可以控制这些环境中的变量，这些变量在构建时会被注入到项目中。命名的环境变量文件的配置，同时它会将此文件中的变量标记为。你的前端代码可以使用这个变量来确定应用程序应该向哪个后端。那么当你以生产模式执行 Vite 的构建过程时，的环境变量注入到你的应用程序中。来访问这个变量，而它的值将会是。
vue3+vite中开发环境与生产环境全局变量配置
qq_45288220的博客
03-21 805
也就是编码时运行的环境，即我们使用npm run dev或者npm run serve运行项目到本地时，项目处于的环境。项目部署到服务器上后处于的环境，我们使用npm run build将项目打包以后，再运行项目，项目就运行在生产环境中了。当我我们需要 使用 window.location.href =url 下载 或者查看文件的时候。import.meta.env.变量名。process.env.变量名。就可以根据环境 来赋值。
【Vite环境变量】import.meta.env 和 loadEnv使用和区别
有事儿私信。
06-07 7406
我们在做项目时需要各种配置信息（如应用标题、API 地址等），这些配置信息可能在不同环境下有所不同（如开发环境和生产环境）。如果每次更改开发或者更改生产环境需要修改源代码中的相关配置，这会导致应用程序的可维护性变得极低！因此，我们可以将这些配置信息通过环境变量来进行管理。
uni-app+vue3+vite+微信小程序开发的问题点
前端，请指教
12-12 1299
uni-app+vue3+vite+微信小程序开发的问题点
vite添加环境变量import.meta.env
qq_43592064的博客
01-25 2万+
在不同的文件里面配置不同的环境变量，可以让我们的配置更加容易维护和使用，这里我们说下vite配置环境变量和模式是怎么配置的。 Vite 在一个特殊的 import.meta.env 对象上暴露环境变量，官网上的东西咱这里就不抄了，O(∩_∩)O哈哈~ 我们这里直接说怎么做的，毕竟官网上没有实际使用的例子，在下在实际使用的时候还遇到点问题，当然也可以说是自己没用对吧。 package.json里面的scripts修改，增加多个环境模式，如： "scripts": { "dev": "vite s
Vue3+vite 配置axios二次封装
u011353226的博客
01-11 1253
Vue3+vite 配置axios二次封装
vue3+vite+ts项目配置开发环境和生产环境 打包命令配置
码农键盘上的梦
06-20 8523
开发环境和生产环境的配置和打包方式有所不同，下面是基于vue3+vite+ts项目的开发环境和生产环境配置及打包方式的详细说明。打包完成后会在项目根目录下生成dist目录，里面包含了打包后的静态文件和index.html文件，可以直接部署到服务器上。这里配置了三个命令，分别是开发环境启动命令、开发环境打包命令和生产环境打包命令。1.3 配置.env.development。2.2 配置.env.production。1.2 配置vite.config.ts。2.1 配置vite.config.ts。
vue3 vite配置开发生产环境
小白的博客
10-13 481
项目根目录下创建.env.development文件。项目根目录下创建.env.production文件。
前端解决Network Error问题，使用.env文件来配置api域名
greendx的博客
10-24 4025
前端解决Network Error问题，使用.env文件来配置api域名
vite配置代理跨域请求或者直接从环境变量获取地址
Madman528的博客
04-13 3721
在axios里面先创建实例 import axios from 'axios' const requests = axios.create({ baseURL: '/api', timeout: 5000 }) export default requests; 然后配置,拦截api开头的请求,把它代理到远程服务器,再把api干掉 server: { proxy: { '/api': { target: 'http://localhost:3005',
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
最新发布
04-10
【资源说明】 1、该资源包括项目的全部源码，下载可以直接使用！ 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业...├─ .env.production # 生产环境配置 ├─ .env.test # 测试环境配置 ......
vite-vue-admin::party_popper::party_popper:使用Vite + Vue3 + TypeScript + Element-plus + Mock开发的后台管理系统:party_popper::party_popper:
05-12
启用 mock 只需在对应运行环境下的 .env.XX 修改 VITE_MOCK 为 true 项目设置 注意事项 默认是开发版本和发行版本都是使用 mock 发行版本如需禁用 mock 请将 main.ts 文件下的如下代码取消注释 并且找到 .env....
vue3:基于vue3+vue-router4+webpack4+vant搭建的手机端基础框架
05-08
入口文件是index.less,自定义的css问津需要导入到index.less才会生效4、util文件夹主要是以下常用的工具类（待完善）5、router.js是路由配置文件6、env.* 三个文件是根据不同环境的配置，主要是配置VUE_APP_BASE_URL...
基于Vue3+TypeScript+echarts的后台管理系统模板源码+使用说明(功能强大).zip
10-26
- 使用 Vue3 + TypeScript 开发 - 采用 Vite 作为构建工具配置了 TSX、跨域、Gzip、去除 console 等 - 对 Axios 进行二次封装，实现了请求拦截、token 无感刷新、取消重复请求等 - 状态管理采用 Pinia，支持持久化...
行内块元素和行内元素 代码换行造成的间隙
qq_50308970的博客
11-17 656
行内块元素和行内元素 代码换行造成的间隙 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 行内块元素和行内元素 代码换行造成的间隙 解决方法给父级元素设置：font-size:0; ...
Vue 环境变量和模式(设置通用baseUrl)
热门推荐
XiaoJL博客
05-30 7万+
Vue CLI3中可以通过设置环境变量和模式，可以根据不同模式加载不同的 baseUrl 地址。具体如下： 一、环境变量 1.描述 在 Vue 项目的根目录下可以创建以下文件来设置环境变量 .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入，但会被 git 忽略 .env.[mode] # ...
vite项目import.meta.env能获取非VITE开发的环境变量
湖北太米网络科技有限公司
03-04 541
​只能获取到Vite的开发环境变量，而不能获取非Vite开发的环境变量。这是因为Vite使用特定的方式来处理环境变量，并提供了一个插件来注入这些环境变量。​​是一个全局对象，用于访问环境变量。通过上述步骤，你可以在Vite项目中使用​。​来获取非Vite开发的环境变量。在Vite项目中，​。
vite项目配置环境变量
qq_45142260的博客
02-17 858
关于vue3+vite项目的环境变量配置，相当于vue2+webpack项目的process
vue3 vite ts .env.development 代理配置
01-13
以下是在Vue3 + Vite + TypeScript项目中配置.env.development文件和代理的步骤： 1. 在项目根目录下创建一个名为`.env.development`的文件，并在其中添加需要的环境变量配置。例如，添加代理的配置： ```shell VITE_PROXY_URL=http://localhost:8000 ``` 2. 在`vite.config.ts`文件中，使用`loadEnv`函数加载`.env.development`文件中的环境变量配置。示例代码如下： ```typescript import { defineConfig, loadEnv } from 'vite'; export default defineConfig(({ command, mode }) => { loadEnv(mode, process.cwd()); // 其他配置项 // ... return { // 返回vite配置 // ... }; }); ``` 3. 在需要使用环境变量的地方，可以通过`import.meta.env`来获取配置的值。例如，在JavaScript文件中打印代理的URL： ```javascript console.log(import.meta.env.VITE_PROXY_URL); ``` 请注意，以上步骤假设你已经正确安装了Vue3、Vite和TypeScript，并且已经创建了一个基本的Vue3 + Vite + TypeScript项目。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值