vue测试环境开发测试正式

lipenghao111

已于 2023-05-09 18:57:29 修改

阅读量654

点赞数

文章标签： java 开发语言

于 2023-04-20 20:56:47 首次发布

本文链接：https://blog.csdn.net/lipenghao111/article/details/130269262

版权

在Vue项目中，通常需要设置不同环境如开发、测试和生产环境。通过创建.env文件来定义不同环境的变量，如APIURL。在axios封装中使用这些变量自动切换基础URL。此外，修改package.json的打包命令，实现自动化切换环境进行构建和发布。

摘要由CSDN通过智能技术生成

在用vue框架时，经常用到多种环境

一种是开发环境，就是本地开发时的环境，

一种是测试环境，就是测试人员使用的服务环境

一种是生产环境，就是要发布到线上的环境。

注意：日常开发是用开发环境的，如果发布到线上时，需要切换环境为线上。如果人为去切换也是可以的，但是会容易忘记，可以通过配置不同的运行命令来自动切换环境。

步骤一：手动创建文件 .env.development 和 .env.production 和 .env.test几个文件
————————————————

`1、.env.development如下：（开发环境）`

NODE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_API_URL = 'http://47.94.4.201/'

2、.env.test（测试环境）

NODE_ENV = 'test'
VUE_APP_MODE = 'test'
VUE_APP_API_URL = 'http://49.94.4.21/'
outputDir = test

3、.env.production如下：（正式线上环境，或者叫生产环境）

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = 'https://www.zzgoodqc.cn/'

步骤二：在axios封装中使用环境配置项（api.js中）

//获取当前环境配置项中的地址，会自动追加到接口上
axios.defaults.baseURL = process.env.VUE_APP_API_URL //添加这个

//获取配置项信息，可以做你的逻辑处理
if(process.env.VUE_APP_MODE==='development'){
//开发环境下的执行操作
   console.log('开发');
}else if(process.env.VUE_APP_MODE==='test'){
//测试环境下的执行操作
   console.log('测试');
}else{
//生产环境下的执行操作
   console.log('正式');
}

步骤三：接口调用

这步骤写过就不用写了

//代码中无需再加服务器IP地址，会自动追加过去
export function apiGet(url, params){
   return new Promise((resolve, reject) =>{
       axios.get(url, {
           params: params,
           herader:{"token":sessionStorage.getItem('token')}
       }).then(res => {
           resolve(res.data);
       }).catch(err =>{
           reject(err.data)
       })
});
}

步骤四：打包命令配置：

//找到package.json
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "vue-cli-service build --mode test", //主要加个这别的应该都有
"publish": "vue-cli-service build && vue-cli-service build --mode test"
},