我们使用vue登录功能改造,就是VS Code和idea联合使用,改造过程中,也会遇见一些问题,今天就和大家分享一下。
首先创建好项目
这个是项目基本目录,下面还有一些自动生成的文件。Src里面有很多文件
src
├── api // 各种接口
├── assets // 图片等资源
├── components // 各种公共组件,非公共组件在各自view下维护
├── icons //svg icon
├── router // 路由表
├── store // 存储
├── styles // 各种样式
├── utils // 公共工具,非公共工具,在各自view下维护
├── views // 各种layout
├── App.vue //项目顶层组件
├── main.js //项目入口文件
└── permission.js //认证入口
然后就去修改网址,在config文件夹里面的dev.env.js文件
‘use strict’
const merge = require(‘webpack-merge’)
const prodEnv = require(’./prod.env’)
module.exports = merge(prodEnv, {
NODE_ENV: ‘“development”’,
// BASE_API: ‘“https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin”’,
BASE_API: ‘“http://localhost:8001”’,
})
然后在idea创建两个方法,login和info
然后在修改VS Code项目里面的api文件夹的login.js
注意:这里用的提交方式和idea那边的提交方式要一致,不然会出问题。
接下来,去测试就会发现报错了
这个错误说的是跨域问题,这里说的是访问端口不一样,所以我们要在idea后端接口controller里面添加注解。
@CrossOrigin //解决跨域问题
这样子问题就解决了。如果还有类似这种错误,可以尝试把node_modules文件删掉,在重新下载一次。