您好,登錄后才能下訂單哦!
小編給大家分享一下vue如何實(shí)現(xiàn)接通后端api以及部署到服務(wù)器的方法,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
1.打開項(xiàng)目工程,找到config文件夾下index.js,進(jìn)行以下修改
dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api':{ target: 'http://www.baidu.com',//后端api地址 changeOrigin: true, pathRewrite:{ '^api': '' } } },
2.然后打開src下App.vue文件配置默認(rèn)前綴
export default { name: 'App', created: function () { this.$http.defaults.baseURL = 'https://www.baidu.com/api' //后端api默認(rèn)前綴,每個(gè)請求都加上這個(gè)前綴訪問后臺(tái)api } }
3.打開項(xiàng)目工程,找到config文件夾下prod.env.js,進(jìn)行以下修改
'use strict' module.exports = { NODE_ENV: '"production"', API_HOST: '"http://www.baidu.com"'//后端api地址 }
4.找到config文件夾下dev.env.js,進(jìn)行以下修改
'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', API_HOST: '"http://localhost:8080"'//這里是本地的訪問ip配置 })
5.然后 npm run build 對項(xiàng)目文件進(jìn)行打包,完成后在項(xiàng)目根目錄下生成dist文件夾,把dist文件夾上傳到服務(wù)器即可
補(bǔ)充知識(shí):Vue全局變量配置(多用于調(diào)用后端API)
我們在使用Vue時(shí),通常需要調(diào)用后端API進(jìn)行一系列的操作。
下面分享一個(gè)我的配置方案。
1.變量分類配置
新建文件,加入配置內(nèi)容如下:
export const apiAddress = { install(Vue){ Vue.prototype.$javaAddress = '11'; } }; export const config = { install(Vue){ Vue.prototype.$config = '1'; } }; export default { apiAddress, config };
在main.js中引入配置
import { apiAddress, config } from './config/address'; Vue.use(apiAddress); Vue.use(config);
2.目前我在用的
export default { install(Vue){ Vue.prototype.$javaAddress = '111'; } }; import address from './config/address'; Vue.use(address);
看完了這篇文章,相信你對vue如何實(shí)現(xiàn)接通后端api以及部署到服務(wù)器的方法有了一定的了解,想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。