vue项目导入前准备

vue项目的node_modules直接放入idea会导致idea卡死,所以放入之前要对idea做配置,使idea对node_modules不索引。
操作方法:IntelliJ IDEA ->Preferences ->Editor展开选中File Types ->在ignore files and folders里加入node_modules; -> Apply ->OK

导入操作

配置完成后,在springboot项目根目录下,新建一个web目录,把整个vue-cli生成的项目放入web目录下。如图所示。

开发环境目录结构
开发环境目录结构

配置SpringBoot+Vue项目

Run ->Edit Configurations -> 点击+(Add New Configuration)-> npm -> 按下图添加开发环境配置-> 保存
开发环境的前端配置

启动项目

注意:vue项目与SpringBoot项目的端口不能冲突
启动vue:
启动步骤
启动springboot:
启动步骤

至此,可以访问前端配置的路径来访问项目。

注意事项

由于前端后台端口不一致,前端在请求后台接口时需设置 代理请求
vue项目中config->index.js 配置代理

    proxyTable: {
        '/background':{
              target: "http://127.0.0.1:8080", //请求地址
              changeOrigin: true,  //是否跨域
              pathRewrite: {  //替换重写
                  '^/background': ''
              }
        }
    },
//接口示例
export function register (obj){
	let url =/background/user/register’; // 在请求时,/background 会替换成target
	 return axios.post(url,qs.stringify(obj))
	.then(function(response){
         return Promise.resolve(response.data);
	})
	.catch(function(err){
		console.log(err);
	})
}
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐