vue-cli 3.0运行、打包不同环境的配置

最新推荐文章于 2024-03-24 21:04:03 发布
原创 最新推荐文章于 2024-03-24 21:04:03 发布 · 575 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何在Vue CLI 3.0项目中配置和运行不同的环境，如test、development和production。通过创建.env环境文件设置NODE_ENV和VUE_APP_BASE_API变量，调整接口请求的基础域名。在package.json的scripts中，可以使用npm run命令切换不同的运行或打包模式，如npm run beta、npm run prod和npm run serve。

默认情况下，一个 Vue CLI 项目有三个模式：test、development、production。也可以自己创建其他模式

1.在根目录下创建.env.环境文件

2.文件夹里配置NODE_ENV和VUE_APP_BASE_API，NODE_ENV决定运行时候的模式，变量以VUE_APP_开头

NODE_ENV = 'beta'  // 决定应用运行的模式

VUE_APP_BASE_API = '请求的域名'

3.拦截器里的baseUrl设置为process.env.VUE_APP_BASE_API，运行不同模式时接口请求的域名不一样。

4.在package.json的scripts里面配置参数。

npm run beta时，<

最低0.47元/天 解锁文章
vue3.0下配置多环境打包
WeiflR10的博客
05-24 579
首先在项目根目录下新建3个文件 ①.env.testt配置（就是测试环境） NODE_ENV = 'test' VUE_APP_CURENV = 'test' ② .env.development配置（就是开发环境） NODE_ENV = 'development' VUE_APP_CURENV = 'development' ③ .env.production配置（就是生态环境及线上环境） NODE_ENV = 'production' VUE_APP_CURENV = 'product
详解vue 不同环境配置不同的打包命令
12-11
最近做的一个项目是配置了三个环境的：正式环境、测试环境和开发环境，下面以这个为例 第一步：安装cross-env npm i --save-dev cross-env 或者在 package.json中加上”cross-env”: “^5.0.1″进行安装依赖 package.json: //这是我项目的目录 第二步：修改各环境下的参数 在config/目录下添加test.env.js、develop.env.js。并且修改文件里的内容 config/prod.env.js config/develop.env.js 第三步：更改build文件夹的东西 1.给buil
详解vue-cli3多环境打包配置
10-17
主要介绍了vue-cli3多环境打包配置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue cli3.0 切换不同环境
strong90的博客
12-17 347
1. 在根目录下创建constans.js 内容如下：个人项目使用nginx配置，所以服务器上的api接口不用指定url var baseUrl = ''; switch (process.env.NODE_ENV) { case 'production': baseUrl = '/api'; break; case 'development': // 5...
vue项目针对不同的环境配置不同的命令行(打包和运行)
Abez_c的博客
05-12 2250
1.需要安装下载cross-env; npm i --save-dev cross-env 2.在vue项目目录下的config文件夹下创建文件 当前项目分为四种环境:开发环境(dev)、测试环境(test)、预生产环境(pre)、生产环境(prod); 由于config文件下已经存在了开发环境和生产环境的文件，后期只需要修改内容即可，所以需要再创建test和pre的文...
vue-cli3.0 脚手架搭建项目的过程详解
10-17
Vue CLI 3.0 是 Vue.js 官方提供的一个强大脚手架工具，它简化了 Vue.js 项目的初始化和构建过程。本篇文章将详细介绍如何使用 Vue CLI 3.0 来搭建一个新的 Vue 项目。 首先，你需要确保已经安装了 Node.js 和 npm...
详解在vue-cli3.0中自定css、js和图片的打包路径
10-16
Vue CLI 3.0默认使用Webpack作为其项目打包工具，提供了较为详细的配置选项以适应不同的构建需求。 ### 前言 在开发Vue应用程序时，我们经常会遇到需要自定义资源打包路径的场景。比如，可能因为CDN部署或者其他...
vue-cli-plugin-browser-extension:适用于vue-cli 3.0的浏览器扩展开发插件
05-13
vue-cli-plugin-browser-extension vue-cli 3.x的浏览器扩展开发插件 它有什么作用？ 这旨在作为的替代品（现在，使用此插件已预设为 ）。 该插件为您的vue应用程序更改了serve命令。 此新命令仅用于在测试您的...
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
10-17
在使用Vue CLI 3.0构建项目时，经常会遇到打包后文件体积过大的问题，尤其当构建一个单页应用(SPA)时，首屏加载速度成为影响用户体验的重要因素。首屏加载时间过长会直接导致用户感觉网页响应缓慢，从而降低用户满意...
使用Vue-cli 3.0搭建Vue项目的方法
08-27
本文主要介绍了使用Vue-cli 3.0搭建Vue项目的方法，涵盖了环境准备、搭建脚本文件、配置文件等多个方面的知识点。 一、环境准备 在开始搭建Vue项目之前，需要进行环境准备，包括安装Node.js、nrm、yarn、vue-cli ...
vue项目经验：vue-cli3根据不同环境配置打包命令
weixin_45031595的博客
05-10 995
在vue-cli3的项目中， npm run serve时会把process.env.NODE_ENV设置为development； npm run build 时会把process.env.NODE_ENV设置为production； 此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。 一、创建环境配置文件 1、.env.development文件（开发环境） NODE_ENV=development VUE_APP_ENV=development
vue3 不同环境(开发、测试、生产)打包配置
品味生活
11-05 5246
Vue3不同环境（开发、测试、生产）打包配置需求实现原理配置步骤创建3个.env文件配置脚本代码调用执行脚本其他参考资料： 需求 在Vue3.X中，执行package.json Script 脚本命令，在项目中配置不同(本地、测试、生产)环境的API URL 实现原理 创建.env文件，在env文件中添加URL 常量，配置打包命令对应的env文件，获取不同env文件中定义URL常量值。 配置步骤 ...
vue打包上线流程
最新发布
zerolea的博客
03-24 1357
vue项目打包上线流程
在NPM上发布beta或alpha版
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
08-13 8105
来源：Larahttps://www.zcfy.cc/article/publishing-a-beta-or-alpha-version-to-npm大多数软件在发布之前都有beta版...
【npm】npm发布测试（beta）版和正式版
热门推荐
流萤梦的博客
07-11 1万+
为什么要发布beta版 发布beta版，是因为有些功能还需要测试和验证，看看有没有bug啥的，还没有到正式发布的程度。 如何发布beta版 在实现新功能之后，首先就是要对版本号进行更改。 举个简单的例子： 正式版的版本号是1.0.0，在原版本上新增了功能之后，需要发布一个测试版本进行测试。 测试版本的格式可以是：1.0.0-beta.0 注意，我们是在正式版本后面加上beta.0，.0 表示的是哪个版本，如果测试过程中发现了新问题需要修改，只需把 .0 改为 .1，以此类推。 如何更改.
vue-cli / vue-cli3 配置不同环境对应不同打包命令详解
dengzeyuan的博客
03-20 2987
废话不多说，直接跟着我的步骤走； vue-cli 一、package.json 因为我这边的Jenkins（测试环境）的脚本执行命令为 build（运维不给改）所以只好前端将build命令对应的环境修改为测试环境。 ...
vue3.0+webpack 打包 万能配置
weixin_43779879的博客
04-14 3613
vue3.0+webpack 打包 万能配置
webpack打包 productionSourceMap 和 devtool 的区别
qq_38935512的博客
03-28 2937
前沿 最近看webpack有个疑惑：productionSourceMap和devtool这两个属性功能貌似一样，都是解决生产环境报错定位困难的问题 查了一些资料 1.devtool devtool:他是webpack的属性，在webpack文档中能找到https://v4.webpack.docschina.org/configuration/devtool/#root 下面是他的一些选项，根据实际情况例如生产环境不想暴露源码可以选择对应的值，文档中说的也是比较清楚的。下图他的一些打包性能也是比较清
vue-cli3.0深度解析：配置与功能亮点
Vue CLI 3.0 的特性解读涵盖了从项目创建、配置定制到打包优化的全过程。它的目标是帮助开发者更快地搭建 Vue.js 项目，同时提供丰富的配置选项以满足不同项目的需求。通过这些改进，Vue CLI 3.0 成为了 Vue 生态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值