阿里云使用nginx配置vue项目上线（nginx.conf的配置）

最新推荐文章于 2025-02-28 10:49:36 发布

await play;

最新推荐文章于 2025-02-28 10:49:36 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_42469247/article/details/101718701

版权

本文介绍如何将Vue项目使用npm run build命令进行打包，并详细解释了如何在阿里云服务器上通过Nginx配置文件nginx.conf实现前端项目与后端API的正确代理及跨域设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将vue项目进行打包：

npm run build

在文件夹中会出现一个dist文件夹，这就是打好的包。
在阿里云上下载安装nginx后，在/usr/local文件夹中会有一个nginx文件夹，其中的conf文件夹中的nginx.conf就是nginx的配置文件。
在http模块配置location

	location / {
        root      /root/app/dist/; //指向目标项目的文件夹，
	    index     index.html index.htm;
	    try_files $uri  $uri/  /index.html;
	    add_header 'Access-Control-Allow-Origin' '*' always;
     	add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept' always;
    }

	location /api/ {
		rewrite ^.+api/?(.*)$ /$1 break;//这个很重要
		proxy_pass  http://xxxxxxxx:3000;//需要的代理到后台的地址以及端口号	
      	proxy_set_header Host $host:$server_port;
	}