命令:vue create vuedemo(vuedmeo爲項目的文件夾) 。vue
//vue.config.js
module.exports = {
}
複製代碼
命令:npm install vue-resourcenpm
在main.js引入resource並使用api
//main.js
import Vue from 'vue'
import App from './App.vue'
import Resource from 'vue-resource';
Vue.use(Resource); //使用resource
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
複製代碼
//vue.config.js
module.exports = {
devServer: {
port: 8080,
host: "localhost",
https: false,
// 自動啓動瀏覽器
open: false,
proxy: {
"/api": {
target: "http://typhoon.zjwater.gov.cn", //設置調用的接口域名和端口
changeOrigin: true, //是否跨域
ws:true,
pathRewrite: {
"^/api": ""
}
}
}
}
}
複製代碼
proxy: {
"/api": {
target: "http://typhoon.zjwater.gov.cn", //設置調用的接口域名和端口
changeOrigin: true, //是否跨域
ws:true,
pathRewrite: {
"^/api": ""
}
}
}
複製代碼
"/api"就是代替target的值(typhoon.zjwater.gov.cn),那麼咱們在請求數據時的url爲跨域
this.$http.get("/api/Api/TyphoonList/2019").then(res => {
console.log(res);
})
複製代碼
轉換後瀏覽器
this.$http.get("http://typhoon.zjwater.gov.cn/Api/TyphoonList/2019").then(res => {
console.log(res);
})
複製代碼
便是/api代替http://typhoon.zjwater.gov.cn。bash