vue项目打包问题

vue项目配置接口地址

1.设置不同的接口地址

先找到以下文件

/config/dev.env.js

/config/prod.env.js

可以看到dev.env.js里面内容如下

这是生产环境的参数配置,然后我们可以再上面文件加入一行代码,如下:

这就是本地测试环境请求后台接口的域名

然后找到prod.env.js文件,如下:

我们加入一行代码,如下:

这是我们上传服务器以后,请求后台接口的域名

2.在代码中调用设置好的参数,

比如我在本项目中重新封装axios(api文件在/src/api/index.js中),将配置好的接口地址作为baseURL拼接到接口路径中,应用参数部分如下:

 

 

最后重新启动项目就可以了,当npm run dev的时候就运行在生产环境,当npm run build的时候就是正式的线上环境.

Vue axios设置访问基础路径

在main.js 做如下配置：

import axios from 'axios'axios.defaults.baseURL = 'http://10.202.42.24:8080/sf-cloud-web'Vue.prototype.axios = axios将axios配置到Vue原型中，使用方法为：this.axios.get('/test/1').then(function (response) {}）

可能会遇到报错：

Cannot read property 'protocol' of undefined

这是因为axios不能使用 Vue.use(axios) 方式引用，需要使用原型方式引入

 

跨域:

客户端请求服务端的数据是存在跨域问题,在使用axios的时候会发现没有jsonp的请求方式,所以如果要使用axios直接进行跨域访问是不可能的,这样就需要配置代理了.

 

 

打包后资源相对引用路径的和背景图片路径问题

vue项目中若要使用相对路径来获得相应静态资源，需要修改以下内容来确保项目打包后能正常运行。

1、修改config => index.js => build => assetsPublicPath 中的'/'成为'./'

 

2、在build => util.js 里找到ExtractTextPlugin.extract增加一行：publicPath: '../../'，主要解决背景图片路径的问题。