vue项目打包之后接口出现错误的问题及解决
作者:温情key 时间:2024-05-09 15:11:25
错误信息
这是新建一个项目还原问题,node简单写了个数据返回
关键代码
const express = require('express')
const app = express();
// 解决跨域问题
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
})
// 调用接口直接返回一个数组
app.get('/getData', (req, res) => {
res.send([
{
id: 1,
name: 'GAI'
},
{
id: 2,
name: 'keyNg'
},
{
id: 3,
name: '闪火'
}
])
})
// api/index.js
import axios from 'axios'
export function getData() {
return axios({
url: 'api/getData',
method: 'get'
})
}
// home.vue
mounted() {
getData().then(res => {
console.log(res);
})
},
打包前
打包后
解决方式
设置环境变量
引用一句官网原话:
请注意,只有 NODE_ENV,BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。
1.根目录新增.env.development文件(会在开发环境被载入)
// .env.development
VUE_APP_TITLE = '温情dev'
VUE_APP_ENV = 'dev'
VUE_APP_BASE_URL = 'http://localhost:3000'
2.根目录新增.env.production文件(会在生产环境被载入)
// .env.production
VUE_APP_TITLE = '温情pro'
VUE_APP_ENV = 'pro'
VUE_APP_BASE_URL = 'http://localhost:3000'
3.改一下 axios 请求方法
// api/index
// 这里只是简单解决一下问题
// 重点就是把开发环境和生产环境请求地址区分开来就可以了, 根据实际情况自行改动
import axios from 'axios'
let baseURL = '';
// process.env.VUE_APP_ENV拿到我们在前面设置的模式,
// 如果现在是开发环境会使用`.env.development`里面设置的环境变量等于`dev`
// 如果现在是生产环境会使用`.env.production`里面设置的环境变量等于`pro`
if(process.env.VUE_APP_ENV === 'dev') {
? ? baseURL = '/api';
} else {
? ? baseURL = process.env.VUE_APP_BASE_URL
}
export function getData() {
? ? return axios({
? ? ? ? url: `${baseURL}/getData`,
? ? ? ? method: 'get'
? ? })
}
小提示:
.env.development和.env.production文件修改之后记得重新跑一下项目
来源:https://blog.csdn.net/qq_48960335/article/details/123942034
标签:vue,项目打包,接口错误
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Mysql运行环境优化(Linux系统)
2024-01-14 16:38:03
py3nvml实现GPU相关信息读取的案例分析
2022-01-11 11:00:52
phpcms中的评论样式修改方法
2024-05-02 17:17:23
python肯德尔系数相关性数据分析示例
2023-02-20 21:42:35
![](https://img.aspxhome.com/file/2023/5/100755_0s.jpg)
python开发之str.format()用法实例分析
2022-01-15 22:10:23
用Go写一个轻量级的ssh批量操作工具的方法
2024-05-21 10:28:04
Javascript 获取css属性
2009-05-31 16:49:00
python logging模块书写日志以及日志分割详解
2023-02-23 12:52:16
![](https://img.aspxhome.com/file/2023/3/86603_0s.jpg)
Python爬虫获取基金变动信息
2022-08-15 21:57:15
![](https://img.aspxhome.com/file/2023/5/93975_0s.webp)
Python中的内置函数isdigit()
2023-05-16 16:10:31
ITK 实现多张图像转成单个nii.gz或mha文件案例
2023-02-18 20:39:51
Go语言实现RSA加解密算法详解
2024-02-08 12:20:55
如何用Python制作微信好友个性签名词云图
2023-02-24 07:46:20
![](https://img.aspxhome.com/file/2023/7/123567_0s.jpg)
Python3逻辑运算符与成员运算符
2021-03-29 18:59:14
用Python写王者荣耀刷金币脚本
2022-03-04 11:55:28
js将table的每个td的内容自动赋值给其title属性的方法
2023-08-07 18:34:54
Linux安装Pytorch1.8GPU(CUDA11.1)的实现
2021-12-20 10:02:00
![](https://img.aspxhome.com/file/2023/8/118668_0s.png)
php5.4传引用时报错问题分析
2023-11-14 15:03:17
PyQt 线程类 QThread使用详解
2021-09-18 05:51:37
PHP后台实现微信小程序登录
2024-03-14 22:17:25
![](https://img.aspxhome.com/file/2023/6/58486_0s.png)