vue项目配置生产、测试和开发环境

目前的 web 项目开发基本都是基于前后端分离的模式。

在实际的开发过程中，从开发到测试完成、发布到线上所调用到的接口地址可能都不一样，那就需要在项目中分别配置各个环境的接口地址（或者域名，也可以定义不同环境下的不同变量）。

首先，在项目根目录下新建3个文件 .env 、.env.test、 .env.production

第二步，编辑文件

.env（开发环境）

NODE_ENV=development
VUE_APP_API_URL= 'http://localhost:8080/' // 开发接口域名

.env.test（测试环境）

NODE_ENV=test
VUE_APP_API_URL= 'http://localhost:8080/' // 测试环境接口域名

.env.production（生产环境）

NODE_ENV=production
VUE_APP_API_URL= 'http://localhost:8080/' // 生产环境接口域名

第三步，修改 baseURL

vue 项目一般配套使用 axios 进行接口请求，设置基本请求路径如下，让它根据环境请求不同域名下的接口。

axios.defaults.baseURL = process.env.VUE_APP_API_URL

第四步，打包配置

在 package.json 文件的 scripts 对象中加入

"build:test": "vue-cli-service build --mode test", // 打包测试环境
"build:prod": "vue-cli-service build --mode production", // 打包生产环境
"build": "vue-cli-service build", // 默认打包为开发环境

完成后，在终端运行对应代码，进行打包。如

npm run build
npm run build:test
npm run build:prod

vue项目配置生产、测试和开发环境相关推荐

Vue cli3配置生产环境，开发环境，和测试环境
目录 1.先在package.json文件中添加: 2.在项目目录下建立 .env文件和.env.test文件 3.配置api变量 3.1.配置axios的baseURL路径 3. ...
黑马博客——详细步骤(十)项目功能的实现之开发环境与生产环境
6. 开发环境与生产环境如何区分开发环境与生产环境通过电脑操作系统中的系统环境变量区分当前是开发环境还是生产环境. 电脑→属性对开发环境和生产环境进行不同的操作: 开发环境中把客户端的请求信息打 ...
新版Vue项目配置项目名称-publicPath-前端_v1.0.2
文件名称版本号作者 qq 版本新版Vue项目配置项目名称-publicPath-前端 v1.0.2 学生宫布 8416837 webpack 4.28.4 文章目录 js配置 js配置定义全局 ...
Vue项目部署及使用WebStorm开发Vue
Vue项目部署及使用WebStorm开发Vue Vue项目部署搭建Vue环境新建Vue项目使用WebStorm开发Vue WebStorm相关配置配置路由全局页面App.vue 全局引入组件 ...
java opencv 开发环境_在IntelliJ IDEA 13中配置OpenCV的Java开发环境
准备工作: 下载IDEA 13(这里以版本13为例,后面简称IDEA): 下载Java JDK(用于配置基本的Java开发环境): 下载OpenCV 2.4.9(这里以版本2.4.9为例,据这篇文章说 ...
六十四、Vue项目去哪儿网App开发准备
2020/10/20 . 周二.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/20 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...
配置Fiori for iOS开发环境
写在前面本文是Fiori for iOS系列文章的第三篇. SAP和苹果这两个IT大佬,在2017年联合推出了Fiori for iOS,让全球的开发者能在iOS平台上,方便地开发SAP企业应用. ...
配置OpenCV2和OpenCV3开发环境笔记
配置OpenCV2和OpenCV3开发环境笔记 Date: 2016-01-19 Author: Kagula Environment: Visual Studio 2013 Update5, Ope ...
使用Jenkins持续集成Vue项目配置Sonar任务
title: 使用Jenkins持续集成Vue项目配置Sonar任务 tags: jenkins Vue.js Sonar categories: ci date: 2017-12-05 22:09: ...

vue项目配置生产、测试和开发环境

vue项目配置生产、测试和开发环境相关推荐

最新文章

热门文章