vue打包后axios请求路径错误

Question

这是index.js配置

这是在store里面请求数据时
开发时，他会吧 api装车成http://localhost:8888

但是打包后她就没有转换了 直接是api

我哪里还需要配置吗？
还有打包是，js跟css路径也有错误

Answer 1

api 接口一般来讲不会和 H5 部署在一个站点，所以打包后 ajax 请求是需要带上 api 域名的。
故在使用 axios 的时候应该考虑不同的环境使用不同的配置。

配置

使用不同配置的方法有很多，这里贴一下我用的方式(放到src/config是为了开发时修改配置不用重启)

dev环境

export default {
  apiBaseUrl: '/apidomain',
};

prod环境

export default {
  apiBaseUrl: 'http://www.yimo.link',
};

代理设置

proxyTable: {
  '/apidomain':{
    target:'http://test.api.com',//dev接口
    changeOrigin:true,
    pathRewrite: {
      '^/apidomain': ''
    }
  }
}

使用

import config from 'config'
import axios from 'axios'

axios.get(config.apiBaseUrl+"/...")

不过在正式项目中一般会设置一个过滤器来创建一个通用的实例使用
具体的话可以参考下之前写的一个demo项目

Answer 2

anios.get(url),url要写绝对路径，要把ip或则http://localhost和端口号写全.

Answer 3

你index.js中的设置是开发环境下跨域代理，生产环境没用的，针对这种生产环境，开发环境下请求不同域名的问题，你可以参考下我的这篇文章 vue-cli 搭建的项目处理不同环境下请求不同域名的问题，

Answer 4

楼主解决问题了吗