vue3对开发环境，测试环境以及生产环境的相关配置

最新推荐文章于 2024-07-31 11:41:46 发布
最新推荐文章于 2024-07-31 11:41:46 发布
阅读量601 收藏
点赞数
文章标签： vue 接口 vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/someoneyoulove/article/details/119351514
版权

vue3对开发环境，测试环境以及生产环境的相关配置

前言

我们在开发vue项目的时候，会分为开发环境，测试环境以及生产环境。为了方便项目日后的开发，我们要对不同环境进行相应的设置。

一、设置全局变量

1.在根目录下新建以下三个文件

在这里插入图片描述
文件内的代码如下（示例）：

VUE_APP_CURRENTMODE='xxxxxxx'    //不同环境的标识
VUE_APP_URL='http://xxxxxxx'     //不同环境所对应的URL

二、在package.json中设置相应的代码

代码如下（示例）：

    "serveTest": "vue-cli-service serve --mode test",  //测试环境
    "servePro": "vue-cli-service serve --mode production",//生产环境
最低0.47元/天 解锁文章
@Redamancy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vuecli3配置开发环境 测试环境 生产环境
断肠人在刷牙〃的博客
08-20 1151
开发环境、生产环境、测试环境的基本理解和区别： 开发环境：开发环境是程序猿们专门用于开发的服务器，配置可以比较随意， 为了开发调试方便，一般打开全部错误报告。项目尚且在编码阶段，我们的代码一般在开发环境中 不会在生产环境中，生产环境组成：操作系统 ，web服务器 ，语言环境。 php 。 数据库 。 等等 测试环境：一般是克隆一份生产环境的配置，一个程序在测试环境工作不正常，那么肯定不能把它发布到生产机上。项目完成测试，修改bug阶段 生产环境：是值正式提供对外服务的，一般会关掉错误报告，打开错误日志.
vite（vue3+ts）配置开发、测试、生产环境
LuoYi_ly_的博客
08-18 1万+
关于vite配置开发、测试、生产环境的记录。
Vue安装及环境配置、开发工具
热门推荐
dream_summer的博客
09-29 23万+
vue前端框架的环境搭建。
Vue cli3配置生产环境，开发环境，和测试环境
weixin_51225684的博客
09-02 4339
如过我们运行npm run serve 在就先加载.env文件，之后加载.env.development文件，两个文件有同一个项，则，后加载的文件就会覆盖掉第一个文件，也即是.env.development文件覆盖掉了.env文件的NOOE_ENV选项。没有加的情况下，serve是自动默认.env.development build是自动默认.env.production。如果我们需要加载私有的情况下，可以像test一样，-mode test ，当我们运行的时候，就是运行env.test文件。...
vue配置开发环境，测试环境，生产环境
Lc_style的博客
04-18 6498
开发环境：一般是本地开发时所使用的环境，改动很频繁 测试环境：较为稳定的版本，一般用于部署测试 生产环境：发布到线上的版本 配置不同环境变量可避免切换不同环境时手动修改项目配置，请求url等，vue项目中可先在package.json文件中这样设置： "scripts": { "dev": "vue-cli-service serve --mode development", //开发环境 "dev:test": "vue-cli-service serve --mode t.
vue配置开发环境和生产环境
xia_tian666的博客
09-23 9564
本文主要介绍开发、测试以及生产环境的配置。
vue3 vite配置开发生产环境
小白的博客
10-13 592
项目根目录下创建.env.development文件。项目根目录下创建.env.production文件。
vue项目配置生产、测试和开发环境
weixin_43930421的博客
05-28 4776
目前的 web 项目开发基本都是基于前后端分离的模式。 在实际的开发过程中，从开发到测试完成、发布到线上所调用到的接口地址可能都不一样，那就需要在项目中分别配置各个环境的接口地址（或者域名，也可以定义不同环境下的不同变量）。 首先，在项目根目录下新建3个文件 .env 、.env.test、 .env.production 第二步，编辑文件 .env（开发环境） NODE_ENV=development VUE_APP_API_URL= 'http://localhost:8080/' // 开发接口域名
vue3 不同环境(开发、测试、生产)打包配置
品味生活
11-05 4602
Vue3不同环境（开发、测试、生产）打包配置需求实现原理配置步骤创建3个.env文件配置脚本代码调用执行脚本其他参考资料： 需求 在Vue3.X中，执行package.json Script 脚本命令，在项目中配置不同(本地、测试、生产)环境的API URL 实现原理 创建.env文件，在env文件中添加URL 常量，配置打包命令对应的env文件，获取不同env文件中定义URL常量值。 配置步骤 ...
vue-cli3 配置开发与测试环境详解
10-16
主要介绍了vue-cli3 配置开发与测试环境详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解vue+axios给开发环境和生产环境配置不同的接口地址
12-02
在不同的环境（开发环境和生产环境）下，接口地址的配置是不同的，这是为了确保应用能够正常工作并保证安全性。 首先，让我们了解一下为什么需要配置不同的接口地址。在开发环境中，前端通常运行在本地开发服务器上...
Vue 开发环境初始配置.docx
09-07
本文档对 Vue 开发环境初始配置进行了详细的说明，包括 NodeJS 环境配置、npm 切换国内资源、Vue 开发环境配置、Windows powershell 开发权限设置、Vue 项目结构说明、开发命名规范、开发流程、开发移动端文字换算...
vue开发环境配置跨域的方法步骤
01-19
本文要实现的是：使用vue-cli搭建的项目在开发时配置跨域，上线后不做任何任何修改，接口也可以访问 production：产品 生产环境 development：开发 开发环境 1.开发环境设置跨域使用工具： vue-cli自带的配置配置 ...
详解Vue中nextTick的原理与作用
fengjing81的专栏
07-24 967
Vue中的nextTick是一个非常重要的API，它允许开发者延迟回调函数的执行直到下次DOM更新循环之后。这一机制在Vue开发中非常有用，特别是在处理DOM更新和异步操作时。下面将详细解释nextTick的原理与作用。
vue实现电子签名、图片合成、及预览功能
weixin_58572700的博客
07-23 1251
本文介绍了电子签名、图片合成、及预览功能
Vue系列面试题
qq_44186810的博客
07-23 1104
Vue2中采用Object.defineProperty来实现数据响应式，Object.definePropery虽然可以监听到数组的变化，但是由于在性能和体验的性价比上考虑，Vue2放弃了这个特性。1）v-for优先于v-if被解析，从源码中发现，先处理静态节点，在处理once，在处理for，在处理if，代码显示for的优先级比if高，断点调试也证实for优先于if。v-if：是惰性渲染机制，在属性初始为false时，组件就不会被渲染，直到条件为true，并且切换条件时会触发销毁/挂载组件。
前端Web-JavaScript(上)
最新发布
Yu2uki的博客
07-31 1306
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 854
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
vuecli3 生产开发测试环境以及输出文件目录打包配置
06-06
好的，以下是对应的配置： 1. 生产环境配置： 在`package.json`文件中，添加如下命令： ``` "build": "vue-cli-service build --mode production" ``` 在根目录下创建`vue.config.js`文件，配置如下： ```javascript module.exports = { // 配置生产环境的打包输出目录 outputDir: 'dist', // 配置生产环境的publicPath publicPath: '/', // 打包时不生成.map文件，减少打包体积 productionSourceMap: false, // 生产环境下的webpack配置 configureWebpack: config => { // 在生产环境中使用CDN加速，减少打包体积 if (process.env.NODE_ENV === 'production') { config.externals = { 'vue': 'Vue', 'vue-router': 'VueRouter', 'element-ui': 'ELEMENT', 'axios': 'axios', } } } } ``` 2. 开发环境配置： 在`package.json`文件中，添加如下命令： ``` "serve": "vue-cli-service serve --mode development" ``` 3. 测试环境配置： 在`package.json`文件中，添加如下命令： ``` "test": "vue-cli-service build --mode test" ``` 在根目录下创建`vue.config.js`文件，配置如下： ```javascript module.exports = { // 配置测试环境的打包输出目录 outputDir: 'dist-test', // 配置测试环境的publicPath publicPath: '/', // 打包时不生成.map文件，减少打包体积 productionSourceMap: false, // 测试环境下的webpack配置 configureWebpack: config => { // 在测试环境中使用CDN加速，减少打包体积 if (process.env.NODE_ENV === 'test') { config.externals = { 'vue': 'Vue', 'vue-router': 'VueRouter', 'element-ui': 'ELEMENT', 'axios': 'axios', } } } } ``` 以上就是生产、开发和测试环境的配置，同时也可以通过`process.env.NODE_ENV`变量来区分不同的环境。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值