关于vue-cli2.x的孤独踩坑,axios本地跨域问题,页面渲染问题,已有接口,3000端口能拿到数据,8080端口拿不到,vue+nodejs+mongodb全栈商城项目

由于我看的视频用的vue-cli2.3.1和webpack2.3.3,这个版本生成出来的vue项目build文件夹下有dev-server.js和dev-client.js文件,而我当时不清楚vue-cli较新版本具体哪些不同,跟着视频敲命令cnpm i -g vue-cli导致装的版本为2.9.6,cnpm i -g webpack装的版本为4.41.2,导致我这样生成出来的vue项目build文件夹下没有dev-server.js和dev-client.js文件,网上查了下说vue2.5版本后把这俩文件合并到了webpack.dev.conf.js文件中

我的vue-cli和webpack版本
vue -V 查看vue-cli版本为: 2.9.6
webpack --version 查看版本为: 4.41.2
用axios跨域
1、先把之前模拟后台数据代码屏蔽掉,我的是在webpack.dev.conf.js和GoodsList.vue中
关于vue-cli2.x的孤独踩坑,axios本地跨域问题,页面渲染问题,已有接口,3000端口能拿到数据,8080端口拿不到,vue+nodejs+mongodb全栈商城项目
关于vue-cli2.x的孤独踩坑,axios本地跨域问题,页面渲染问题,已有接口,3000端口能拿到数据,8080端口拿不到,vue+nodejs+mongodb全栈商城项目
关于vue-cli2.x的孤独踩坑,axios本地跨域问题,页面渲染问题,已有接口,3000端口能拿到数据,8080端口拿不到,vue+nodejs+mongodb全栈商城项目
2、设置跨域,在config/index.js中加上如下代码
关于vue-cli2.x的孤独踩坑,axios本地跨域问题,页面渲染问题,已有接口,3000端口能拿到数据,8080端口拿不到,vue+nodejs+mongodb全栈商城项目
3、在GoodsList.vue中加上如下代码
关于vue-cli2.x的孤独踩坑,axios本地跨域问题,页面渲染问题,已有接口,3000端口能拿到数据,8080端口拿不到,vue+nodejs+mongodb全栈商城项目
我谷歌装了vue插件,在Chrome控制台vue中显示goodsList已经拿到数据,像下面这样

关于vue-cli2.x的孤独踩坑,axios本地跨域问题,页面渲染问题,已有接口,3000端口能拿到数据,8080端口拿不到,vue+nodejs+mongodb全栈商城项目
我的其他报错
这时我的goodsList已经拿到数据,但页面渲染不出来,报错说click有问题,我把之前写的几个click先删除掉了,这次没报错,页面才渲染出来
之前看到click报错没想到会阻止页面渲染,一直没理它,卡了我半天,一直不知道问题出在哪,在一次次试错中才试出来解决方法,开心