vue-cli生成的项目配置开发和生产环境不同的接口
时间:2022-05-08
本文章向大家介绍vue-cli生成的项目配置开发和生产环境不同的接口,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
vue-cli生成的项目,vue项目配置了不同开发环境的接口地址,axios.defaults.baseURL如何引用这个地址,这是在我发布项目的时候考虑的,于是想到了
方法一:
config下配置文件分别如下:
dev.env.js:
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_ROOT: '"//xxx.xxx.xxx.xxx:9001"'
})
prod.env.js
'use strict'
module.exports = {
NODE_ENV: '"production"',
API_ROOT: '"https://xxx.zzz.com"'
}
我在app.vue和main.js中试了以下方法,可以生效,但是因为在配置API_ROOT的时候里面地址带双引号,所以不能直接使用该接口地址,如果去掉API_ROOT中的双引号,打包的时候又会报错。
const config = require('../config')
import axios from 'axios';
if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = config.dev.env.API_ROOT;
} else {
axios.defaults.baseURL = config.build.env.API_ROOT;
}
所以暂时没想到该怎么解决这个问题…………遂放弃方法一。
方法二:(集热心网友提供的方案)
一般项目webpack
会有两个或多个配置文件,如:
webpack.prod.conf.js
对应线上打包
webpack.dev.conf.js
对应开发环境
使用webpack.DefinePlugin
就可以
开发环境(webpack.dev.conf.js):
//开发环境下的baseURL
new webpack.DefinePlugin({
BASE_URL:"'xxxxxxxxx'"
})
线上环境(webpack.prod.conf.js):
//线上环境下的baseURL
new webpack.DefinePlugin({
BASE_URL:"'xxxxxxxxx'"
})
我们只需要在入口文件中写上:axios.defaults.baseURL = BASE_URL;
即可。
通过配置了DefinePlugin,那么这里面的标识就相当于全局变量,你的业务代码可以直接使用配置的标识。
注意:这里配置
BASE_URL
属性值的时候要单独给里面的值再加一个引号,否则输出的值不是字符串,所以会报错。
- CTF| SQL注入之获取数据类
- 200行,写个2048游戏
- 您有一份CTF代码审计文件等待查收
- 颠覆者的游戏:程序语言
- CTF| SQL注入之login界面
- 懒惰的力量
- 让AI自动修复程序中的bug:微软亚洲研究院新研究 | 附论文
- OpenDaylight与Mininet应用实战之OpenFlow1.0协议分析二
- Javascript: 世纪机器语言?
- OpenDaylight与Mininet应用实战之基本环境搭建一
- 永恒不变的魅力
- MobileNet教程(2):用TensorFlow搭建安卓手机上的图像分类App
- OpenDaylight与Mininet应用实战之流表操作三
- 天啊,这个围笑代表什么?麻省理工的AI比你更懂 | 论文+Demo
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- HTML5 meta viewport参数详解
- 二分查找应该都会,那么二分查找的变体呢?
- TypeScript 实战算法系列(三):实现链表与变相链表
- JavaScript 测试系列实战(一):使用 Jest 和 Enzyme 测试 React 组件
- TypeScript 实战算法系列(二):实现队列与双端队列
- VBA位操作
- VBA编写Ribbon Custom UI编辑器07——写入xml
- Linux下在文件夹所有文件中查找相关内容
- archlinux安装篇(一) 基本系统
- git使用要点
- 七夕 - 程序员表白代码
- Shell流程控制
- Shell sed命令
- focus/focusin/focusout
- once