Springboot和Vue前后端分离项⽬的启动部署(详细版)⼀、⾸先拿到spring boot + vue项⽬,可以从git 上获取到
1. spring boot 项⽬导⼊idea中启动,运⾏mian函数启动项⽬(tomcat端⼝改为80)
1. 测试node和cpm是否成功
1. 打开⿊窗⼝(win键+x)点击:命令提⽰符管理员(必须以管理员运⾏)。
2. 输⼊node -v npm -v
3.
4. 出现版本号为成功。
三、安装完node以后,⿊窗⼝进⼊vue项⽬根路径下。
1.
2. 运⾏命令:npm install (下载必须的依赖,如果报错了就是node环境有问题,查百度重新搭环境)
3. 运⾏完上⾯的命令以后在执⾏ : npm run build (这个命令是打包)
4. 出现这个说明已经打包成功:
5.
6. 成功以后你的vue项⽬下会出现⼀个dist的⽂件夹。
7.
8. 打包好vue项⽬以后,留着dist⽂件⼀会⽤到。
三、准备开始部署。
nginx部署前端项目1. ⾸先下载nginx服务器(我的nginx是安装到linux系统的,具体安装请⾃⼰查资料)
2. 安装好nginx以后,在nginx下随便创建⼀个⽂件夹,然后把刚才dist⾥⾯的所有⽂件全部放到你刚在nginx下创建的⽂件夹⾥⾯,然
后开始配置nginx(配置⽂件位置:nginx/f)
3.
4. 然后 f (编辑这个⽂件)root:后⾯改成⾃⼰存放dist内容的⽂件路径, index:后⾯是固定的
5.
6. 配置完以后按esc 后 在按shirt+zz 退出保存。
7. 然后到nginx⽬录下的sbin中启动nginx服务器
8. 启动:./nginx 重启:./nginx -s reload
9. 好了现在已经把vue项⽬部署完了,接下来就是解决跨域问题。
四、处理跨域问题(因为俩个代码不在⼀个服务器中,vue项⽬在linux中,springboot项⽬在本地)
1. ⾸先下载⼀个 SwitchHosts ⼯具。
2.
3. 打开(右键以管理员⾝份运⾏)
5. 这个窗⼝让留着,别关掉,接下来就是修改你vue项⽬的请求路径了(很重要的⼀步)。
6.
7. 修改完以后,吧原来你在nginx下⽬录中的存放dist的⽂件删除(三个⽂件全部删除)然后重新按照上班的打包,在放进去然后在重启
nginx。
8. 然后运⾏vue项⽬,然后就可以正常拿到数据了。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论