vue中使用axios请求数据时,提示数据加载中...
1.安装脚手架3.0以下npm install -g vue-cli@版本号3.0以上npm install -g @vue/cli@版本号查看脚手架版本vue -v2.创建项目(本文章采用脚手架4.0)vue create project-name创建项目,具体详情的项目配置,本文省略,可参考下面的文章https://www.cnblogs.com/zhoulifeng/p/11690799.h
1.安装脚手架
3.0以下
npm install -g vue-cli@版本号
3.0以上
npm install -g @vue/cli@版本号
查看脚手架版本
vue -v
2.创建项目(本文章采用脚手架4.0)
vue create project-name
创建项目,具体详情的项目配置,本文省略,可参考下面的文章
https://www.cnblogs.com/zhoulifeng/p/11690799.html
项目创建好后
cd project-name // 进入项目根目录
npm run serve // 运行项目
然后在浏览器输入http://localhost:8080,就可以看到运行的界面了
3.创建配置文件
脚手架4.0已经没有config文件,如果要修改配置文件,直接在项目根目录下直接创建vue.config.js文件,将要修改的值,写到这个文件中即可(本文不会用到,就不展示了)。
要实现开发环境与生产环境,不同时,使用不同的地址。需要对开发环境与生产环境进行不同的设置。
在根目录下创建.env.development与.env.production两个文件
创建开发环境变量 .env.development
创建生产环境变量 .env.production
.env.development文件:
VUE_APP_BASE_URL = 'http://localhost:9999'
.env.productio文件:
VUE_APP_BASE_URL = 'http://localhost:8888'
注:
1.修改文件后,刷新无用,一定要重新执行命令后,配置才会生效
2.以VUE_APP_开头是定义相对应的环境变量
4.使用axios请求数据
npm install axios --save
在main.js中加入如下代码:
import Axios from 'axios'
if(process.env.NODE_ENV === 'development') { //说明当前为开发环境
// 开发环境相关特殊方法
Axios.defaults.baseURL=process.env.APP_BASE_URL;
//baseUrl地址使用.env.development文件中的配置对象API_HOST,API_HOST名称不固定,根据你的定义的来
}
else if(process.env.NODE_ENV === 'production'){
// 生产环境相关特殊方法
Axios.defaults.baseURL=process.env.APP_BASE_URL;
// baseUrl地址使用.env.production文件中的配置对象API_HOST,API_HOST名称不固定,根据你的定义的来
}
Vue.prototype.$axios=Axios;
5.在nodejs中启动服务
localhost:8888/list post方式
localhost:9999/list post方式
保证上面的接口,正确返回数据
6.在组件中通过axios请求接口数据
mounted:function(){
this.$axios.post("/list").then((res)=>{
this.list=res.data;
console.log(res);
})
}
7.测试
开发环境:npm run serve
正线环境:
需要创建vue.config.js,添加如下代码:
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
}
在执行npm run build
大家,可以看到开发环境与生产环境的值不一样
作者:doubleyong
公众号:bug收集
博客:bugshouji.com (专门解决与收集bug的网站)
更多推荐
所有评论(0)