Vue 项目构建与开发入门:env 文件与环境设置

最新推荐文章于 2024-05-20 09:36:42 发布
最新推荐文章于 2024-05-20 09:36:42 发布
阅读量440 收藏 1
点赞数
分类专栏： 2023年全栈之道：前后端实战项目从入门到精通 文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52343631/article/details/131344892
版权

目录

介绍

1. 配置文件

2. 环境注入

3. 额外配置

4. 实际场景

结语

在实际项目的开发中，我们一般会经历项目的开发阶段、测试阶段和最终上线阶段，每一个阶段对于项目代码的要求可能都不尽相同，那么我们如何能够游刃有余的在不同阶段下使我们的项目呈现不同的效果，使用不同的功能呢？这里就需要引入环境的概念。

一般一个项目都会有以下 3 种环境：

  • 开发环境（开发阶段，本地开发版本，一般会使用一些调试工具或额外的辅助功能）
  • 测试环境（测试阶段，上线前版本，除了一些 bug 的修复，基本不会和上线版本有很大差别）
  • 生产环境（上线阶段，正式对外发布的版本，一般会进行优化，关掉错误报告）

作为一名开发人员，我们可能需要针对每一种环境编写一些不同的代码并且保证这些代码运行在正确的环境中，那么我们应该如何在代码中判断项目所处的环境同时执行不同的代码呢？这就需要我们进行正确的环境配置和管理。

介绍

1. 配置文件

正确的配置环境首先需要我们认识不同环境配置之间的关系，如图所示：

我们从上图中可以了解到每一个环境其实有其不同的配置，同时它们也存在着交集部分

了解本专栏 订阅专栏 解锁全文
个人笔记(bug，思路，总结)
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
vue项目使用.env文件配置全局环境变量的方法
10-16
主要介绍了vue项目使用.env文件配置全局环境变量的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue 项目构建与开发入门.rar
06-18
『课程介绍』: 你会学到什么 基于 Vue CLI 3.x 项目构建的基础知识 常用的前端包管理工具及命令相关知识 使用脚手架构建的参数配置与注意事项 webpack 在 Vue CLI 3.x 中的应用方式 单页及多页应用的构建方法 Vue 项目开发技巧和代码优化相关知识 Vue API 中实用但容易忽略的属性和方法 实用的 Vue 项目开发工具、第三方库及接口知识 可以试一下这一款markdown编辑器: https://www.typora.io/ 『课程目录』: 开篇：Vue CLI 3 项目构建基础.md 开发拓展篇 1：扩充你的开发工具.md 开发拓展篇 2：将 UI 界面交给第三方库.md 开发拓展篇 3：尝试使用外部数据.md 开发指南篇 1：从编码技巧与规范开始.md 开发指南篇 2：学会编写可复用性模块.md 开发指南篇 3：合理划分容器组件与展示组件.md 开发指南篇 4：数据驱动与拼图游戏.md 开发指南篇 5：Vue API 盲点解析.md 构建基础篇 1：你需要了解的包管理工具与配置项.md 构建基础篇 2：webpack 在 CLI 3 中的应用.md 构建基础篇 3：env 文件与环境设置.md 构建实战篇 1：单页应用的基本配置.md 构建实战篇 2：使用 pages 构建多页应用.md 构建实战篇 3：多页路由与模板解析.md 构建实战篇 4：项目整合与优化.md 总结篇：写在最后.md
【Vue3】env环境变量的配置和使用（区分cli和vite）
最新发布
黎明总是如期而至
05-20 967
目前vue程序可以通过cli和vite两种方式构建，但是两种方式加载env的方式有些不同，这里基于自己的理解简单记录。
vite-vue2-windicss-starter：Vite-使用composition-api和windiCSS的Vue 2入门模板
03-04
恶毒 :high_voltage: -Vue 2入门模板 创建由闪电般的快速构建工具捆绑在一起的Vue 2应用程序 :fire: 特征 :high_voltage: ， 和 :vertical_traffic_light: :package: :artist_palette: 快速和黑暗模式的点播Tailwind CSS :grinning_face_with_big_eyes: -由提供支持 :toolbox: 基本的Vue合成实用程序的集合 :magnifying_glass_tilted_left: ESLint +漂亮 :mechanical_arm: 打字稿 :package: Vite插件 -Vite 2对Vite的支持 -Vite的按需组件自动导入 -Vite的WindiCSS / TailwindCSS 在Vite中作为Vue组件访问数千个图标 :rocket: 入门 GitHub模板 使用此模板时，请尝试遵循清单以正确更新您的信息 重命名package.json name字段 在LICENSE更改作者姓名 在.env更改应用名称
vue中env文件的配置和其他配置文件的说明
牛先森家的博客
03-22 2966
vue中env文件的配置vue项目中env文件的配置文件名：文件内容：关于文件的加载process.env属性注意修改完要重新启动一遍项目vue项目中 .eslintrc.jsvue项目中 .gitignorevue 项目中 .eslintignorevue 项目中.stylelintrc.jsvue 项目中 jsconfig.jsonvue 项目中 .editorconfig vue项目中env文件的配置 因项目中有使用到.env文件，所以记录一下用处，方便日后查看 文件名： 必须按如下方式命名，无需手动
vue中开发模式和环境变量详细
m0_72993813的博客
01-13 505
Vue 3支持三种模式：开发模式（development）、生产模式（production）和测试模式（test）。你可以通过 process.env.NODE_ENV 变量来获取当前的模式。// 开发模式下的逻辑// 生产模式下的逻辑} else {// 测试模式下的逻辑。
vue项目配置env
qq_45061876的博客
02-10 4991
vue项目配置env
vue项目中如何配置env环境
weixin_59244784的博客
05-25 9914
Vue项目如何配置环境变量
RuoYi-Vue/vue项目配置env
sayyy的专栏
02-18 1398
略
vue项目 .env详解
misstianyun的博客
02-07 907
一次项目中.env配置公共变量总不生效，取值总是返回undefined，原来它是这样工作的
vue 3 第三十六章：vite环境变量（.env文件的配置及使用）
热门推荐
to_the_Future的博客
06-11 1万+
通过使用.env文件，我们可以轻松管理不同环境下的配置。在Vite的应用程序中，可以使用import.meta.env对象来访问环境变量，并根据不同的环境使用不同的配置。这样可以使我们的应用程序更加灵活和易于维护。
vue-cli的工程模板与构建工具详解
10-17
总之，vue-cli通过提供预设的工程模板和构建工具，降低了Vue.js项目的入门门槛，同时也为项目开发提供了标准化和高效的解决方案。熟悉和掌握这些工具，能够提升开发效率，确保项目质量和可维护性。
laravel-vuetify-spa：具有Vuetify前端的Laravel-Vue SPA入门项目模板
02-04
具有Vuetify前端的Laravel-Vue SPA入门项目模板。 从派生 产品特点 Laravel 5.6 + Vue + Vue路由器+ Vuex 使用 UI框架构建的前端 具有自定义布局的页面 登录，注册和密码重置示例 使用客户端表单验证 与集成 使用...
从零开始用webpack构建一个vue3.0项目工程的实现
01-18
入门级别教程，适用于初级工程师 移动端 单页面 Demo 正文 第一步 找一个你认为合适的磁盘。输入mkdir test, cd test , npm init -y。 第二步 安装依赖 webpack 系列依赖 webpack webpack-cli babel 系列...
Template-Vue:完整的结构化Vue.js项目
03-31
Vue.js入门模板 要求： 客户环境 将.envs重命名为.env 查看vue.config.js并将APP_NAME替换为您的域； 这仅影响构建过程。 如果正在运行用于本地开发的Express服务器，请查看vue.config.js并更新...
mevn-stack：使用VueJS管理门户构建Express API的快速入门
02-02
该项目旨在被用作用于构建一个快速启动 栈。 这类似于MEAN堆栈，只不过Angular已换成在客户端呈现的VueJS单页应用程序。 这也是UW-Parkside App Factory在第二次VueJS培训中使用的代码。 技术领域 该项目使用： ...
vue中使用.env文件
努力的nana
07-21 1285
① 在项目根目录下新建名称.env.test的文件② 文件内容如下：变量的名称必须以VUE_APP_开头。
vue种env配置以及在路由中的简单使用
全栈科学家的博客
03-06 1352
在项目启动的时候，如果文件内部不包含 NODE_ENV 变量，它的值将取决于模式，例如，在 production 模式下被设置为 "production"，在 test 模式下被设置为 "test"，默认则是 "development"。实际情况中，生产环境和你开发环境使用的地址是不一样的，如果更换或者打包都需要修改很多变量，如果不进行变量的处理，那么修改数据的时候极易发生错误。.env文件是vue运行项目时的环境配置文件，它可以存储不同环境下的变量。.env.development：开发环境的配置文件。
vue 项目 创建开发 生产环境文件
09-14
在Vue项目中，我们可以通过创建不同的配置文件来区分开发环境和生产环境。 首先，我们需要创建两个配置文件：.env.development和.env.production。这两个文件分别对应开发环境和生产环境的配置。 在.env.development文件中，我们可以设置开发环境的配置项。在你提供的引用中，它是以VUE_APP_开头的属性名，比如VUE_APP_BASE_API_D。这些配置项会在执行npm run serve命令时自动加载。你可以在这个文件中设置开发环境所需的配置，如后端API的地址、端口号等。 在.env.production文件中，我们可以设置生产环境的配置项。同样，它也以VUE_APP_开头的属性名来定义配置项。这些配置项会在执行npm run build命令时自动加载。你可以在这个文件中设置生产环境所需的配置，如后端API的地址、端口号等。 注意，为了使配置文件生效，我们需要在Vue项目的配置文件中进行相应的配置。在你提供的引用中，我们可以在config文件夹下的index.js文件中找到相应的配置。在该文件的dev对象中，assetsSubDirectory属性定义了静态资源根目录的子目录sta。你可以根据需要修改这些配置项来适应你的项目需求。 总结起来，创建开发环境和生产环境的配置文件，并在配置文件中设置相应的配置项。在Vue项目的配置文件中，我们可以修改dev对象的属性来定制开发环境的配置。 参考资料： 配置文件 .env.development：开发环境下的配置文件,执行npm run serve命令，会自动加载.env.development文件. .env.production：生产环境下的配置文件,执行npm run build命令，会自动加载.env.production文件 js 命名规则 属性名必须以VUE_APP_开头 比如VUE_APP_BASE_API_D js 开发环境中跨域 使用vue-cli创建的项目，开发地址是localhost:8080，...在vue-cli项目中的config文件夹下的index.js配置文件中，修改前的dev： dev: { assetsSubDirectory: 'static', //静态资源根目录的子目录sta 最后使用按钮请求数据 <el-button @click="TestBtn">测试</el-button> import {development} from "@/api/serveApi/development"; TestBtn(){ console.log('不同环境',process.env.VUE_APP_BASE_API_D) development({ },).then(res=>{ console.log(res) }) } //这里导入封装的Api，我们运行开发环境和生产环境分别给的Api前缀不同，就是我们配置的env.development和env.production

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

个人笔记(bug，思路，总结)

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值