vue项目环境快速切换

约定不等于承诺〃 2023-09-26 16:43 15阅读 0赞

vue项目可以根据不同的启动命令应用对应环境的域名及其它变量值

**一、配置文件说明**

**对应的配置文件：**

![33c80504c57d416fb272c295fc77df1f.png][]

**.env**：公用配置文件，不管在哪个环境启动的项目，都会使用这个文件里面的变量  
其他配置文件里和此文件**同名的变量会覆盖**.env里的变量，**不同名就合并**  
**.env.development**：开发环境，默认配置文件，即当不指定任何环境启动时使用；  
**.env.production**：正式环境，在 package.json 启动命令后加 --mode production  
**.env.staging**：测试环境，在 package.json 启动命令后加 --mode staging

**二、package.json配置**

> "scripts": \{
> 
> "serve": "vue-cli-service serve",
> 
> "staging": "vue-cli-service serve --mode staging",
> 
> "production": "vue-cli-service serve --mode production",
> 
> "build": "vue-cli-service build",
> 
> "build2": "vue-cli-service build --mode staging",
> 
> "build3": "vue-cli-service build &&vue-cli-service build --mode staging",
> 
> "lint": "vue-cli-service lint"
> 
> \},

**三、命令**

> npm run serve 启动开发环境
> 
> npm run staging 启动测试环境
> 
> npm run production 启动正式环境
> 
> npm run build 构建正式环境
> 
> npm run build2 构建测试环境
> 
> npm run build3 同时构建正式环境和测试

[33c80504c57d416fb272c295fc77df1f.png]: https://img-blog.csdnimg.cn/33c80504c57d416fb272c295fc77df1f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，15人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-cli脚手架快速搭建vue项目环境

开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦。幸好，vue官方提供了一个快速搭建vue项...

悠悠/ 2024年04月18日 23:17/ 0 赞/ 89 阅读

相关 Vue + ElementUI快速构建项目

我们采用实战教学模式并结合 ElementUI 组件库，将所学知识点应用到实际中，以最快速度带领大家掌握 Vue 的使用。创建工程注意：命令行要使用管理员模式运行

我会带着你远行/ 2024年03月29日 16:06/ 0 赞/ 109 阅读

相关 vue项目环境快速切换

vue项目可以根据不同的启动命令应用对应环境的域名及其它变量值一、配置文件说明对应的配置文件： ![33c80504c57d416fb272c295fc77df1f

约定不等于承诺〃/ 2023年09月26日 16:43/ 0 赞/ 16 阅读

相关初学者快速构建vue项目

首先需要搭建Vue开发环境，参考：[windows环境搭建Vue开发环境][windows_Vue] 1.使用iview推荐工程快速开发官网推荐工程：[view-u

逃离我推掉我的手/ 2023年06月09日 12:23/ 0 赞/ 234 阅读

相关 vue-cli 4 快速构建一个 Vue 项目

1.1 环境搭建 1.1.1 node ☞ 概述 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使

末蓝、/ 2023年02月26日 02:24/ 0 赞/ 35 阅读

相关 vue 项目如何快速优化

Vue在前端框架中的地位就像曾经的 jQuery，由于其简单易懂、开发效率高，已经成为了前端工程师必不可少的技能之一。无论是 BAT 等大厂，还是小型初创公司，Vue

超、凢脫俗/ 2022年11月10日 14:14/ 0 赞/ 159 阅读

相关通过Maven profile实现环境切换，快速部署到正式环境

前言在开发工作中存在多个环境：开发环境、测试环境、正式环境（生产环境），而每个环境的MySQL、Redis、Rabbitmq、ElasticSearch等配置各不相同，

深碍√TFBOYSˉ_/ 2022年05月21日 00:59/ 0 赞/ 265 阅读

相关使用vue-cli 快速搭建Vue项目

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目 webpack是一个现代 JavaScript 应用程序的静态模块

落日映苍穹つ/ 2022年05月18日 04:59/ 0 赞/ 319 阅读

相关 vue环境项目启动

在师兄的推荐下入坑vue.js ，发现不知如何运行GitHub上的开源项目，很尴尬。通过查阅网上教程，成功搭建好项目环境，同时对前段工程化有了朦朦胧胧的认知，因此将环境搭建过程

布满荆棘的人生/ 2022年03月29日 09:23/ 0 赞/ 317 阅读

相关使用vue-cli快速创建vue+webpack项目

1、安装vue脚手架 npm install -g vue-cli 2、创建一个vue+webpack项目 vue init webpack projectname 运

叁歲伎倆/ 2021年09月16日 17:16/ 0 赞/ 463 阅读