nginx部署前端教程

一、前言

一般来说现在的软件项目，都是分用户端以及管理端的，并且是前后端分离的，这里我来记录一下部署两个前端的教程。

部署前端之前需要的准备工作是部署springBoot后端程序，这里我docker compose来对后端程序进行部署

详细教程可以参考：
docker compose部署springboot+redis+mysql

这里我的后端接口地址为http://127.0.0.1:8888/

另外还需在服务器上安装nginx，安装nginx的教程不在这里叙述，详细可以参考：
centos安装nginx

准备还以上的工具就可以继续往下走了

二、部署

打包之前，需要注意的是，为了解决跨域问题 ，vue可以反向代理请求后端接口

部分代码如下：
vue.config.js文件

const {
    defineConfig } = require('@vue/cli-service')
const {
    VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');


module.exports = defineConfig({
   
  //配置代理
  devServer: {
   
    host: '0.0.0.0',
    port: 8080,
    proxy: {
   
      //标识
      '/api': {
   
        // 需要访问的地址
        target: 'http://自己服务器的IP+端口',
        // 开启websocket 代理
        ws: true,
        // 开启代理
        changeOrigin: true,
        // 路径重写
        // api是我们写的它可以事任意值 比如我们在开发环境 VUE_APP_BASE_API = '/api' 
        // 但是实际开发接口没有拼接api 我们就可以通过路径重写在真实发送请求的时候把/api = 空
        // 也可以根据实际开发场景，改成其他值 '^/api' : '/其他值' 进行接口请求
        pathRewrite: {
   
          '^/api': ''
        }
      }
    }
  }<