vue.js 跨域请求前端配置和上线部署

一.安装配置axios，跨域请求代理

1.首先配置vue

在main.js加入

import Axios from "axios"

Vue.prototype.$axios = Axios

Axios.defaults.baseURL = "http://127.0.0.1/"     //配置默认发送请求到http://127.0.0.1/，可改或者加端口号  后台接口地址
 

2.打开config/index.js

  module.exports{

       dev:{  }

  }

在这里面找到proxyTable{}，改为这样：

 

3：在需要调接口的组件中这样使用：

二.打包部署
针对打包上线出现的问题  ：如axios请求跨域、css样式失效、图片失效、地址跳转404等一系列问题

步骤一：修改config index.js文件中的打包配置

步骤二、修改build.下的utils.js  (解决css背景图片失效问题)

增加  publicPath:'../../',

 

步骤三、进入vue项目根目录下使用命令 cnpm run build  打包项目，成功后会出现dist文件夹，里面含有static文件夹、index.htm

步骤四、将生成的dist下文件复制到服务器下的njed-app文件夹下