vue 打包报错,vue项目打包部署后打开错误
本文主要介绍了vue项目打包后出现的接口错误问题及解决方法，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
打包解决方案设置环境变量摘要之前和之后的错误消息关键代码
错误信息
这是一个恢复新项目的问题。节点只是写一个数据返回。
关键代码
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)={
资源发送([
{
id: 1，
姓名：“GAI”
},
{
id: 2，
名称：“keyNg”
},
{
id: 3，
名称：“闪火”
}
])
})
//api/index.js
从“axios”导入axios
导出函数getData() {
返回axios({
URL:“API/get data”，
方法：“get”
})
}
//home.vue
已安装(){
getData()。然后(res={
console . log(RES)；
})
},
打包前
打包后
解决方式
设置环境变量
引用官方网站的一句话：
请注意，只有NODE_ENV、BASE_URL和以VUE_APP_开头的变量会通过webpack静态嵌入到客户端的代码中。DefinePlugin这是为了避免意外公开机器上可能同名的私钥。
1.将env.development文档添加到根目录(它将被加载到开发环境中)
//env . development
VUE _应用程序_标题=温暖开发
VUE应用环境=开发
VUE应用程序基本网址= http://本地主机：3000
2.将env.production文件添加到根目录(它将被加载到生产环境中)
//.env.production
VUE_APP_TITLE=温馨专业
VUE应用环境=专业
VUE应用程序基本网址= http://本地主机：3000
3.更改axios请求方法
//API/索引
//这里只是一个简单的解决问题的方法
//重点是区分开发环境和生产环境的请求地址，根据实际情况进行更改。
从“axios”导入axios
设base URL=“”；
//process.env.VUE_APP_ENV获取我们在前面设置的模式，
//如果现在是开发环境，env.development中设置的环境变量将等于 dev。
//如果现在是生产环境，env.production中设置的环境变量将等于 pro。
if(process . ENV . vue _ APP _ ENV=== dev ){
base URL=/API ；
}否则{
BASE URL=process . env . vue _ APP _ BASE _ URL
}
导出函数getData() {
返回axios({
url: `${baseURL}/getData `，
方法：“get”
})
}
小提示：
记住在。环境发展和。修改env.production文件。
总结
差异化发展模式
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。