温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue项目打包之后接口出现错误怎么解决

发布时间:2022-04-24 10:43:05 来源:亿速云 阅读:522 作者:iii 栏目:开发技术

本篇内容介绍了“vue项目打包之后接口出现错误怎么解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

    错误信息

    vue项目打包之后接口出现错误怎么解决

    这是新建一个项目还原问题,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);
       })
    },

    打包前

    vue项目打包之后接口出现错误怎么解决

    打包后

    vue项目打包之后接口出现错误怎么解决

    解决方式

    设置环境变量

    引用一句官网原话:

    请注意,只有 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文件修改之后记得重新跑一下项目

    “vue项目打包之后接口出现错误怎么解决”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    vue
    AI