【vue】vue项目部署tomcat、nginx及跨域问题

在Vue项目中，部署到Tomcat或Nginx涉及以下步骤：

1. 构建Vue项目：

   在项目根目录下运行构建命令：

   
   
   
   npm run build

   这将创建一个dist/目录，里面包含构建后的文件。

2. Tomcat部署：

   • 将dist/目录中的文件复制到Tomcat的webapps目录下的某个应用文件夹中。
   • 如果你的Vue项目配置了publicPath为/app，确保Tomcat的相应应用配置了路径别名。

3. Nginx部署：

   • 将dist/目录中的文件复制到Nginx的服务器目录中。
   • 配置Nginx的server块，使其指向你的Vue应用的路径。

4. 处理跨域问题：

   • 如果前端应用与后端API服务器跨域，可以在服务器配置（如Tomcat或Nginx配置文件）中添加相应的CORS策略。

以下是一个简单的Nginx配置示例，用于托管Vue应用：

server {
    listen 80;
    server_name your-domain.com;
 
    location / {
        root /path/to/your/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
 
    location /api/ {
        proxy_pass http://backend-api-url;
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
    }
}

在这个配置中，/api/路径下的请求被代理到后端API服务器，并且配置了CORS头部允许跨域请求。

注意：在生产环境中，不建议使用Access-Control-Allow-Origin: *，它可能会引起安全问题。应该指定具体的域名来允许跨域请求。