vue接通后端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接通后端api以及部署到服務(wù)器操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. IntelliJ IDEA安裝插件的方法步驟2. php模擬實(shí)現(xiàn)斗地主發(fā)牌3. 理解PHP5中static和const關(guān)鍵字4. MyBatis中的JdbcType映射使用詳解5. vue 使用localstorage實(shí)現(xiàn)面包屑的操作6. Vuex localStorage的具體使用7. Python random庫使用方法及異常處理方案8. spring acegi security 1.0.0 發(fā)布9. .Net Core使用Coravel實(shí)現(xiàn)任務(wù)調(diào)度的完整步驟10. Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)

網(wǎng)公網(wǎng)安備