小薛博客

Appearance

10、安装Nginx部署前端项目 ​

1、安装Nginx ​

官网:https://nginx.org/

安装：https://nginx.org/en/linux_packages.html

本次采用yum安装

sh
sudo yum install nginx -y

2、Nginx常用目录 ​

  • nginx.conf
    • /etc/nginx
  • 静态文件
    • /usr/share/nginx

3、Nginx启动命令 ​

sh
# 启动
sudo systemctl start nginx

# 查看状态
systemctl status nginx

# 重载配置文件
sudo nginx -t       # 先测试配置文件是否有误（强烈推荐）
sudo systemctl reload nginx

4、初始化一个VUE项目 ​

sh
# 使用 Vue CLI 初始化
# 安装 Vue CLI（如果还没装）
npm install -g @vue/cli

# 创建项目
vue create my-vue-app

# 进入项目目录并启动
cd my-vue-app
yarn serve

image-20250729100050571

vue
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

5、项目打包 ​

sh
yarn build

将dist目录上传到nginx静态目录/usr/share/nginx

image-20250729101327669

6、修改请求后端接口 ​

sh
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <button @click="fetchData">请求接口</button>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods: {
    async fetchData() {
      try {
        const response = await fetch('http://127.0.0.1:8001/test');
        const data = await response.text();
        alert(data);
      } catch (error) {
        alert('请求失败: ' + error.message);
      }
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

7、后端跨域 ​

两种方式都可以，推荐配置文件

  • @CrossOrigin
java
/**
 * @Author: xueqimiao
 * @Date: 2025/7/28 16:30
 */
@RestController
@CrossOrigin
public class TestController {

    // http://127.0.0.1:8001/test
    @RequestMapping("/test")
    public String test() {
        return "hello";
    }

}
  • 配置文件
java
package com.xx.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpHeaders;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOriginPatterns("*") //允许跨域的域名，可以用*表示允许任何域名使用
                        .allowedMethods("*") //允许任何方法（post、get等）
                        .allowedHeaders("*") //允许任何请求头
                        .allowCredentials(true) //带上cookie信息
                        .exposedHeaders(HttpHeaders.SET_COOKIE)
                        .maxAge(3600L); //maxAge(3600)表明在3600秒内，不需要再发送预检验请求，可以缓存该结果
            }
        };
    }
}

8、前后端全部重新部署一下 ​

记得修改接口ip

js
const response = await fetch('http://112.74.160.27:8001/test');
  • 具体看演示

image-20250729102309065