Vue でクロスドメインにプロキシを使用する原理は、ドメイン名をローカル サーバーに送信し (Vue プロジェクトのサービス、loclahost:8080 を開始)、ローカル サーバーが実サーバーを要求することです。
vue.config.js ファイルで devServer.proxy オブジェクトを構成します (cli3 が自動的に生成します。そうでない場合はルート ディレクトリに新しいオブジェクトを作成します)。ここで、devServer.proxy は開発環境のサーバー API アドレスを指します。構成は次のとおりです。
module.exports = {
lintOnSave: false, //关闭eslint检测\
devServer:{
open: false,//项目启动时是否自动打开浏览器,我这里设置为false,不打开,true表示打开
proxy: {
'/api': {
target: 'http://192.168.1.249:9527', //对应自己的接口,代理地址修改后必须重启项目
changeOrigin: true, //是否允许跨域
pathRewrite: {
// 重写路径,当我们在浏览器中看到请求的地址为:http://localhost:8080/api/user/userInfo 时
// 实际上访问的地址是:http://192.168.1.249:9527/user/userInfo,因为重写了 /api
'^/api': ''
}
}
}
}
}
ベースURLの設定
//开发环境时,/api会被替换为上面配置的代理域名'http://192.168.1.249:9527'
//.env 默认全局配置文件
//.env.development 开发环境配置文件
//.env.production 生产环境配置文件
//文件名为Vue的约定,不可随意更改
let config = process.env; //process是nodeJs的全局变量,其中包含了env的属性,Vue项目启动时会自动读取.env文件中的环境变量
//判断是否为开发环境,是,替换为'/api',否,替换为线上地址
let base = config.NODE_ENV === 'development' ? '/api' : '线上地址';
var http = {
request:(url, method, data, headers, isjson)=>{
return new Promise((resolve,reject)=>{
let headerDefult = {
"content-type": "application/x-www-form-urlencoded", //根据需要设置请求头
}
headers = merge(headerDefult, headers)
data = isjson? data: qs.stringify(data) //传入的数据是否为json格式
axios({
method, //请求方式
baseURL:base, //域名
url:url, //接口地址
data, //数据
timeout: 5000, //请求超时的时间,(超时后会进入catch)
headers, //请求头
})
.then(res=>{
if(res.status == 200){
resolve(res.data)
}else{
reject( res && res.data || '')
}
})
.catch(e=>{
reject(e)
})
})
}
}
環境構成
.env.production 本番環境
NODE_ENV = 'prod'
ENV = 'prod'
VUE_APP_BASE_API = 'https://www.xxxxx.com/api'
.env.test テスト環境
NODE_ENV = 'test'
ENV = 'test'
VUE_APP_BASE_API = 'http://www.xxxxxxx.com/api'
package.jsonのパッケージ化コマンドを設定する
//mode后面跟环境变量的值
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build:prod":"vue-cli-service build --mode prod" //打包生产环境
"build:test": "vue-cli-service build --mode test" //打包测试环境
},
packageコマンドを実行してパッケージ化します
测试环境:npm run build:test
正式环境:npm run build:prod