Vue前端项目运行揭秘，详解服务器配置与部署流程
Vue前端的服务器部署位置解析
1、Vue前端项目通常用于数据库管理，在phpMyAdmin中创建数据库的步骤如下：可以通过两种方式添加数据库，一种是通过点击添加按钮，输入密码后提交，另一种是先在服务器上创建数据库，然后通过服务器进行获取，完成数据库创建后，接下来是访问后端接口数据，例如获取用户名，后端项目部署完成后，将进行Vue前端项目的部署，具体步骤将在下篇文章中详细介绍。
2、在前端Vue与后端ThinkPHP的服务器部署中，ThinkPHP作为服务端为客户端提供数据，而Vue则是客户端的一个JavaScript框架，便于对页面进行处理，Vue通常通过异步请求来获取数据，由于实例化Vue时已经将相关的变量、模板等定义好了，因此可以方便地进行数据交互。
3、在Vue服务端部署时，我们知道通过npm run build命令打包好的dist文件，通过HTTP服务指定是可以直接浏览的，ThinkPHP需要通过域名指向index.php文件才能正常浏览。
4、在Vue项目中，路由和页面的切换是通过前端自己跳转实现的，而在Spring Boot中，作为服务器，它只能根据URL请求返回相应的静态资源，需要对Vue项目进行编译，将编译后的静态资源放置在Spring Boot的静态资源目录下，这样在启动Spring Boot应用时就可以访问到前端页面了。
5、在Vue项目中，前后端通常位于不同的文件夹中，可以通过配置webpack或proxy实现前后端的联调，如果使用webpack，可以在vue.config.js文件中进行相关配置。
Vue前后端在两个文件夹中如何实现关联
1、在Controllers文件夹上点击鼠标右键，选择【添加】-【控制器】，即可完成HomeController的创建，在Controller的Index方法内，点击鼠标右键，选择【添加视图】；在项目中添加文件夹【Content】并引入jQuery源文件；在Index页面添加jQuery的引用。
2、Vue.js与后台交互时，可以通过Vue-resource库，使用this.$http.get或this.$http.post发送请求，这需要配置跨域请求，如果后台使用Express.js，默认地址为某个端口，那么需要在Vue-cli的config目录中，打开index.js文件进行配置。
3、使用REST API：C语言程序可以作为后端服务，提供一系列RESTful API供Vue前端调用，Vue前端可以通过GET、POST、PUT、DELETE等HTTP请求与C语言程序进行数据交互，请确保遵循路由使用步骤，首先导入路由，然后配置路由规则，确保有相应的Vue文件对应路由。
4、在Vue项目中，前后端通常位于不同的文件夹中，可以通过配置webpack或proxy实现前后端的联调，如果使用webpack，可以在vue.config.js文件中进行配置。
前端代码部署到服务器的详细步骤
1、前端代码部署通常分为前端和后端部署，对于前端部署，首先对代码进行打包，然后将打包后的文件放置在服务器上，以niua框架为例，首先在项目页面进行打包，使用命令：npm run build --prod对前端进行打包，随后，在服务器上的指定位置进行部署运行。
2、操作步骤如下：配置前端代码，将前端代码放置在web服务器的特定目录下；配置后端接口，将后端接口代码部署在web服务器上。
3、Web前端项目部署到服务器的步骤包括：进入nginx配置目录，对nginx.conf文件进行配置，使用include可以配置多个.conf文件，如一个项目一个配置文件，打包完成后，项目中会出现dist文件夹，执行结果与webpack的配置文件一致。
4、准备工作：部署前，仅需一个Vue项目和一台服务器，服务器上无需预先安装额外软件，使用Vue-cli创建基本Vue项目，运行指定命令，选择配置后执行初始化，安装Nginx，作为轻量级Web服务器，广泛用于互联网项目。
5、部署前端项目：安装Nginx并配置静态资源服务器，将项目资源部署至服务器，在服务器中创建存放项目的文件夹，并通过Git拉取项目，编辑Nginx配置文件并重启服务，通过浏览器访问服务器IP地址查看项目，注意端口与防火墙的管理。
Vue项目部署到Spring Boot后仅能访问index页面的解决方案
1、在测试过程中，如果使用localhost作为请求地址，前端只能通过本地主机访问到session信息，如果尝试使用同一网络中的其他设备访问，则无法获取session值，将请求地址改为服务器IP地址后，不同设备在同一网络下能够正常访问session。
2、在Vue项目中运行npm run build命令进行编译，生成dist目录；将dist目录下的静态资源放在Spring Boot的静态资源目录（src/main/resources/static）下；在Spring Boot中配置视图解析器，将请求/转发到index.html页面，让前端路由系统接管页面跳转。
3、解决思路：由于在Spring Boot后台采用shiro+Jwt安全框架，登录后会反馈给前端一个token，前端将该token存储起来，检查浏览器中是否存在token，如果存在，说明登录成功，可以访问相关页面；如果没有token，则说明未登录，跳转到登录页面。
4、在处理前端页面跳转时，为避免数据泄露，可以利用Vue中的前置路由导航守卫，监控所有页面跳转，当用户尝试访问未授权页面时，将其拦截并重定向至登录页面或当前页面，同时提供未授权提示信息，以改善用户体验。
前端代码部署流程（前端代码发布流程）
1、前端工程部署方式主要分为四个阶段：手动部署、命令工具部署、Docker镜像部署以及平台化部署，从简单的手动部署到复杂且安全的平台化部署，每种部署方式都适应了不同的需求和场景。
2、针对测试环境，需在服务器上准备部署脚本，我们采用pm2实现多分支部署，脚本接收git地址和分支参数，根据参数拉取不同分支的代码至特定目录，对当前分支的pm2进程执行删除操作，然后重新启动，pm2项目名可通过代码分支区分。
3、Web前端项目部署到服务器的步骤包括：进入nginx配置目录，对nginx.conf文件进行配置，使用include可以配置多个.conf文件，如一个项目一个配置文件，打包完成后，项目中会出现dist文件夹，执行结果与webpack的配置文件一致。
4、打包项目：在项目根目录的package.json中，执行npm run build或yarn build，获取打包后的产物，服务器环境推荐选择阿里云等云服务，如1核2G的共享s6，Linux系统更合适内存有限的用户，部署流程如下：使用密钥对登录Linux服务器，进行root用户密码修改；通过scp命令将打包后的项目文件传输到服务器。
5、部署前端项目：安装Nginx并配置静态资源服务器，将项目资源部署至服务器，在服务器中创建存放项目的文件夹，并通过Git拉取项目，编辑Nginx配置文件并重启服务，通过浏览器访问服务器IP地址查看项目，注意端口与防火墙的管理。
6、手动部署是最基础的方式，通过FTP工具将本地build后的dist文件上传到已配置好web服务器（如nginx或Apache）的服务器上，然后通过域名访问，命令工具部署是对手动部署的简化，通过GitLab CI/CD或GitHub Actions等工具，自动监听代码仓库的push事件，执行构建和上传操作，无需手动干预。
Vue+Spring Boot项目部署到服务器（使用宝塔面板）
1、选择路径后，将项目路径上传打包好的.jar文件，并确保端口设置正确，为后端选择一个域名并提交部署，前端部署前，需要理解网站通过域名访问而非IP访问的原理，在实际部署中，需要建立网站并配置域名，由于当前环境仅支持二级域名，因此可以使用IP+端口进行访问。
2、如果需要删除重新下载，首先打开项目，直接运行可能会因为环境不一致而报错，需要重新导入包以适应自己的环境，先删除node_modules文件夹，使用npm cache clean --force命令清除cache缓存，然后重新下载。
3、部署步骤如下：调整Spring Boot的数据库相关配置；使用maven进行项目打包；将打包后的jar文件存放在target文件夹中；登录宝塔面板，确保已安装Java项目配置；进行项目部署；访问项目；连接访问数据库，如果项目包含数据库，首先上传至服务器，然后访问数据库。
4、使用PHP开发的项目必须部署在Web服务器上才能正常运行，PHP是一种服务器端脚本语言，用于开发动态网站和Web应用程序，PHP脚本必须在Web服务器上运行，才能被解释和执行，使用PHP开发的项目必须部署在Web服务器上才能