SpringBoot+VUE项目部署

SpringBoot项目部署

1. 服务器中安装开发环境：jdk,mysql数据库,tomcat服务器
   开发环境安装
2. 服务器中部署
   项目部署

vue前端项目部署

1. 项目打包

   • 打包配置：vite.config.js

   export default defineConfig({
     base: './',  //这里有修改
     plugins: [vue(),
     ],
     build: {
       rollupOptions: {
         external: [
           "/element-plus"
         ],
       },
     }
   })
   

   • 在使用vite build进行打包得到dist文件夹

   • 

   • 接下来将dist文件夹上传到服务器/tmp/test/dist

2. nginx安装

   • 如果是centOS 使用yum istall -y nginx 来安装nginx
   • 如果是ubuntu 使用 apt install yum来安装nginx

3. nginx配置

   1. 切换到目录

      cd /etc/nginx
      

   2. 使用vim进行编辑

      vim nginx.conf
      

      

   3. 键入i进入编辑模式

      

   4. 保存退出

      :wq!
      

4. 运行nginx

   1. 重新载入配置文件

      nginx -s reload

   2. 停止nginx服务器

      nginx -s stop

   3. 启动nginx服务器

      nginx

5. 成果

   此时我们打开 http://公网IP:配置的端口号

   即可看到我们的前端项目，并且可以与我们之前的后端spring项目进行交互

成果

此时我们打开 http://公网IP:配置的端口号

即可看到我们的前端项目，并且可以与我们之前的后端spring项目进行交互