vue接通后端api以及部署到服务器操作


Posted in Javascript onAugust 13, 2020

1.打开项目工程,找到config文件夹下index.js,进行以下修改

dev: {
  // Paths
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
   '/api':{
    target: 'http://www.baidu.com',//后端api地址
    changeOrigin: true,
    pathRewrite:{
     '^api': ''
    }
   }
  },

2.然后打开src下App.vue文件配置默认前缀

export default {
 name: 'App',
 created: function () {
  
  this.$http.defaults.baseURL = 'https://www.baidu.com/api'
  //后端api默认前缀,每个请求都加上这个前缀访问后台api
  
 }
}

3.打开项目工程,找到config文件夹下prod.env.js,进行以下修改

'use strict'
module.exports = {
 NODE_ENV: '"production"',
 API_HOST: '"http://www.baidu.com"'//后端api地址
}

4.找到config文件夹下dev.env.js,进行以下修改

'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 对项目文件进行打包,完成后在项目根目录下生成dist文件夹,把dist文件夹上传到服务器即可

补充知识:Vue全局变量配置(多用于调用后端API)

我们在使用Vue时,通常需要调用后端API进行一系列的操作。

下面分享一个我的配置方案。

1.变量分类配置

新建文件,加入配置内容如下:

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以及部署到服务器操作

以上这篇vue接通后端api以及部署到服务器操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
繁简字转换功能
Jul 19 Javascript
Javascript----文件操作
Jan 18 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
VUE项目初建和常见问题总结
Sep 12 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 Javascript
vue打包npm run build时候界面报错的解决
Aug 13 #Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 #Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 #Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 #Javascript
js实现幻灯片轮播图
Aug 14 #Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 #Javascript
修改Vue打包后的默认文件名操作
Aug 12 #Javascript
You might like
PHP生成静态页面详解
2006/12/05 PHP
PHP实现的封装验证码类详解
2013/06/18 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
javascript常用函数(2)
2015/11/05 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
python连接字符串的方法小结
2015/07/13 Python
Python连接mysql数据库的正确姿势
2016/02/03 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
python numpy数组复制使用实例解析
2020/01/10 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
七年级英语教学反思
2014/01/15 职场文书
党员学习十八大感想
2014/01/17 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
平面设计求职信
2014/03/10 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
教师个人事迹材料
2014/12/17 职场文书
2014企业年终工作总结
2014/12/23 职场文书
新员工试用期自我评价
2015/03/10 职场文书
义卖募捐活动总结
2015/05/09 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书