需求:由于生产环境的服务器请求地址应该是你的域名,而开发环境的请求地址应该是一个本地路径的请求地址。例如:http://localhost:3000,所以我们需要通过vue的配置文件,实现项目编译后请求地址是服务器地址,在开发阶段请求的是本地接口。
第一步:将服务器请求修改为一个变量
新建了一个http.js文件,只需导出http,将其挂载在vue的原型链上,就可以实现为所有的请求都添加请求拦截器,当然也可以在这里通过相应拦截器处理一些的错误状态码。具体请查看axios官方文档。代码如下:
const axios = require('axios')
import Vue from 'vue'
import router from './router'
const http = axios.create({
baseURL: process.env.VUE_APP_API_URL || "/admin/api"
// baseURL: 'http://localhost:3000/admin/api'
});
http.interceptors.request.use(function (config) {
if (localStorage.token) {
config.headers.Authorization = 'Bearer ' + localStorage.token
}
return config;
}, function (error) {
return Promise.reject(error);
});
export default http
第二步:配置开发环境的API接口地址
新建.env.development文件,存储开发环境下的接口请求地址
VUE_APP_API_URL=http://localhost:3000/admin/api
第三步:通过Vue配置文件判断程序运行环境
添加vue配置文件(vue.config.js),在文件中设置公共路径
module.exports = {
// 设置输出文件地址 __dirname代表当前文件夹
outputDir:__dirname+"/../server/admin",
// 配置环境变量,生产环境的请求路径开始为/admin/,开发环境的请求从跟地址开始
publicPath: process.env.NODE_ENV === 'production'
? '/admin/'
: '/'
}
具体请参考Vue-cli配置文档官网说明https://cli.vuejs.org/zh/config/#vue-config-js
至此,你的程序上传服务器后跟本地开发时接口的调用都不会出现问题。
第四步:将编译后的静态文件在服务器上托管,
以nodejs(express)服务器为例:
// 托管静态文件夹
app.use('/admin', express.static(__dirname + '/admin')) // 后台管理界面代码
app.use('/', express.static(__dirname + '/web')) // 前台代码
app.use('/uploads', express.static(__dirname + '/uploads')) // 上传服务器文件