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 相关文章推荐
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
vue里面父组件修改子组件样式的方法
Feb 03 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
tsconfig.json配置详解
May 17 Javascript
JS中async/await实现异步调用的方法
Aug 28 Javascript
JS前端模块化原理与实现方法详解
Mar 17 Javascript
javascript实现多边形碰撞检测
Oct 24 Javascript
原生JavaScript实现随机点名表
Jan 14 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下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
php获取从百度、谷歌等搜索引擎进入网站关键词的方法
2015/07/08 PHP
PHP生成树的方法
2015/07/28 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
Python的迭代器和生成器使用实例
2015/01/14 Python
探究Python中isalnum()方法的使用
2015/05/18 Python
浅谈Python中的闭包
2015/07/08 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
python调用webservice接口的实现
2019/07/12 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
python进行参数传递的方法
2020/05/12 Python
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
法学毕业生自荐信
2013/11/13 职场文书
2014年元旦活动方案
2014/02/15 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
啦啦队口号大全
2014/06/16 职场文书
党员年度个人总结
2015/02/14 职场文书
新郎新娘致辞
2015/07/31 职场文书
2016学校先进集体事迹材料
2016/02/29 职场文书
导游词之峨眉山
2019/12/16 职场文书
警用民用对讲机找不同
2022/02/18 无线电