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 相关文章推荐
javascript中的关于类型转换的性能优化
Dec 14 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
微信小程序 自定义消息提示框
Aug 06 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
微信小程序常用简易小函数总结
Feb 01 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
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 开发环境配置(测试开发环境)
2010/04/28 PHP
php 缩略图实现函数代码
2011/06/23 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
php报错502badgateway解决方法
2019/10/11 PHP
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
Python多进程同步简单实现代码
2016/04/27 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
Python networkx包的实现
2020/02/14 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
override和overload的区别
2016/03/09 面试题
电工工作职责范本
2014/02/22 职场文书
家长会开场白和结束语
2015/05/29 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书