5-5 Vue CLI多环境部署

已于 2022-02-28 15:16:48 修改
阅读量501 收藏
点赞数
分类专栏： SpringBoot 文章标签： vue.js 前端 javascript
于 2022-02-28 13:34:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sunweikai123/article/details/123179009
版权
本文介绍了如何在Vue CLI项目中设置和使用多环境配置，包括开发和生产环境，通过创建不同的配置文件，并利用process.env读取环境变量进行API请求的适配。此外，还展示了如何进行编译，将项目打包为静态资源并调整axios的请求域名，确保在不同环境中正确运行。经过一系列步骤，最终实现多环境的顺利部署。
摘要由CSDN通过智能技术生成

一、增加开发和生产配置文件

这个只能访问本机，一般会添加一个不同环境的配置，如下

在web文件夹中新增

 新增如下：

 使用process.env.xxx读取环境变量。

然后作如下修改

最低0.47元/天 解锁文章
孤注一掷 、
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli3分环境打包
01-20
Vue CLI 3 是 Vue.js 的一个官方构建工具，它提供了快速搭建 Vue 项目的能力，并且支持自定义配置，包括分环境打包。分环境打包对于现代前端项目至关重要，因为不同的环境（开发、测试、生产）可能需要不同的配置，...
vue-cli多环境
08-01
Vue CLI 的多环境配置是项目开发中的重要环节，尤其对于大型项目，确保代码在不同环境（如开发、测试和生产）下具有正确的行为至关重要。 在 Vue CLI 中，我们可以通过配置 `.env` 文件来管理不同的环境变量。默认...
Vue CLI多环境配置
qq_43265564的博客
10-22 740
在公司中，我们的项目有本地环境，还有测试环境和正式发布环境，所以我们需要为项目配置多环境的配置来启动不同的环境下对应的文件。这里参考的项目是该博客搭建的项目Idea创建Vue CLI 一.增加开发和生成多环境配置 二.修改启动和编译多环境 三.修改axios请求地址支持多环境 我们的本地请求路径都是localhost写死的，但有的时候测试环境等路径是其他路径所以我们需要进行配置。 在web项目下新建一个文件 然后选择text就好了 然后在创建的文件里面，首选配置环境变量，是开发环境： NOD.
vue-cli5脚手架搭建项目过程详解 -vue组件单元测试
前端打杂师
08-03 1605
单元测试是对软件中的最小可测试单元进行测试。（最小可测试单元是要有结果产出的。例如某个方法，单独的某个操作）单元测试其实是伴随着敏捷开发，它是对更快开发的一种追求。早发现错误比晚发现错误会更好，保证自己的代码符合要求一: 搭建基于 jest 的 vue 单元测试环境 零配置开箱即用二: 使用 vue-test-util 提高测试编码效率。...
最新【vue】使用vue-cli5
最新发布
java_dazhuzhu的博客
05-03 653
通过@vue/cli实现的交互式的项目脚手架。通过@vue/cli实现的零配置原型开发。一个运行时依赖 ()，该依赖：可升级；基于 webpack 构建，并带有合理的默认配置；可以通过项目内的配置文件进行配置；可以通过插件进行扩展。一个丰富的官方插件集合，集成了前端生态中最好的工具。一套完全图形化的创建和管理 Vue.js 项目的用户界面。概述==
vue-cli5.0脚手架的安装搭建和运行
qq_60334912的博客
08-19 1898
vue脚手架安装
vue项目用vue.config.js来配合不同环境自动切换配置
wys997的博客
08-19 2668
1. 首先安装插件,并修改启动项 安装cross-env 跨平台切换插件兼容好, -作用: 切换环境变量 例如: 不同的打包和运行命令切换不同的配置变量 "scripts": { "serve": "cross-env type=dev vue-cli-service serve", "build": "cross-env type=prod vue-cli-service build" } 安装 process 插件 是node中读取nodejs总环境变量的所用参数 作用:在
vue环境配置包含多环境
QYDUAN的博客
07-16 725
1.package.json 作用： package.json 文件其实就是对项目或者模块包的描述，里面包含许多元信息。比如项目名称，项目版本，项目执行入口文件，项目贡献者等等。npm install 命令会根据这个文件下载所有依赖模块。 文件结构如下： { "name": "sop-vue", "version": "0.1.0", "author": "zhangsan <zhangsan@163.com>", "description": "sop-vue", "k
详解vue-cli3多环境打包配置
10-17
Vue CLI 3 提供了方便的多环境打包配置机制，让我们可以轻松地管理和切换这些环境。 首先，要使用 Vue CLI 3，我们需要全局安装它。在命令行中输入以下命令： ```bash npm install -g @vue/cli ``` 安装完成后，...
vue cli 3.x 项目部署到 github pages的方法
10-17
Vue CLI 3.x 是 Vue.js 开发环境的脚手架工具，它简化了构建 Vue 应用的过程。本文将详细讲解如何将 Vue CLI 3.x 项目部署到 GitHub Pages 上，以便于展示或分享你的纯静态项目。 1. **关于 GitHub Pages** GitHub...
Vue-cli项目部署到Nginx服务器的方法
10-16
- 如果你需要在同一台 Nginx 服务器上部署多个 Vue CLI 项目，可以通过修改每个项目的 `vue.config.js` 文件中的 `publicPath`，设置不同的前缀，如 `/vue1/` 和 `/vue2/`。 - 分别将每个项目的构建文件复制到对应...
Vue CLI配置指南（5）环境变量和模式
悦涵仙子的技术笔记本
08-26 828
你可以替换你的项目根目录中的下列文件来指定环境变量： .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入，但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略 一个环境文件只包含环境变量的“键=值”对： FOO=bar VUE_APP_SECRET=secret 被载入的变量将会对 vue-cli-s
多环境配置vue.config.js vue2
weixin_45799001的博客
06-01 709
vue.config.js 文件 package.json 上面对应的文件新建，dev，build，uat，prod .dev 配置 .uat 配置 prod 配置如上 request.js
vue不同环境打包配置不同 vue环境变量配置
Baby_加油_的博客
03-15 4691
（即每个环境对应变量的变量值都是一样的时候，则可以将变量定义在公用的.env文件中，而对应每个环境的 .env.xxx文件中则不需要再重复定义此变量）.在.env.xxx 文件中只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量会通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。vue-cli-service build --mode test :命令中的test对应的是 .env.xxx 文件的后缀名，如果也找不到.env.test文件，则打包报错。
VUE多环境打包
weixin_59817492的博客
06-24 674
web打包步骤
VueCLI多环境配置
lian1112880的博客
04-20 193
运行命令： npm run serve-dev。VUE_APP_XXX固定写法。新增文件：.env.prod。新增文件：.env.dev。
【Vue系列】Vue之多环境配置实现自动部署
邓邓子的博客
05-04 1856
目录一、方式一：通过 process.env.NODE_ENV 环境变量进行设置1.定义环境参数2.编写 js 文件，对环境进行判断3.部署服务器上设置环境变量二、方式二：通过指定编译参数进行设置1.配置 .env 文件（1）.env.development（2）.env.uat（3）.env.prod2.修改 package.json 文件3.编译打包 Vue 项目在不同阶段需要部署到不同的环境，比如开发环境（dev）、测试环境（test）、UAT 环境（uat）、生产环境（prod）等，那么如何通过自
Vue 多环境的配置
个人学习使用
06-26 4609
首先 我们得了解 什么是多环境变量，以及多环境变量的作用，下面用一句简短的话来描述环境一般分为开发环境，测试环境，生产环境作用：文件创建的位置 根目录下 开发环境 配置生产环境来到控制台 启动命令吧 下面我将演示 启动开发环境的指令 其他环境类似为了方便测试 我们来到 main.ts 文件中 输出当前的环境 你们的可能是js 不影响大局.........
npm install -g @vue/cli
09-11
此外，Vue CLI还提供了更多的命令和选项，用于构建和部署Vue.js应用程序。 通过全局安装Vue CLI，我们可以更方便地使用Vue.js的功能和工具来进行项目开发。全局安装一次Vue CLI后，我们就可以在任何地方使用它，而...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值