Nginx服务简单的本地配置，运行Vue项目

猪小是念来过倒！！

已于 2024-07-05 10:54:15 修改

阅读量386

点赞数 1

文章标签： nginx vue.js 运维

于 2024-06-22 20:34:56 首次发布

本文链接：https://blog.youkuaiyun.com/m0_63544346/article/details/139887540

版权

Nginx服务简单的本地配置，运行Vue项目

官网下载压缩包
解压到本地
在Nginx目录下打开终端
输入start nginx启动服务
在浏览器输入localhost显示Nginx欢迎页表示启动成功
或者在终端输入tasklist /fi "imagename eq nginx.exe"可查看正在运行的服务
打包Vue项目
在项目目录下打开终端
输入npm run build自动进行打包
完成后目录中出现dist文件夹
把生成的dist文件夹复制到Nginx的html目录下
进入conf目录，打开nginx.conf文件，修改相关参数

	server {
		#访问的端口号
        listen      90; 
        
        #访问的IP地址
        server_name  localhost;
        
        location / {
        	#被访问的资源目录
            root   html/dist;
            index  index.html index.htm;
			
			#大文件可以被压缩，提高加载速度
			gzip on;  # 注意是在当前的访问域名下开启有效
			gzip_comp_level 6; # 压缩比例，比例越大，压缩时间越长。默认是1
			gzip_types text/xml text/plain text/css application/javascript application/x-javascript application/rss+xml image/jpeg image/gif image/png; # 哪些文件可以被压缩
			gzip_disable "MSIE [1-6]\."; # IE6无效
        }
        
		#拦截请求
		location /api/ {
			#转发请求到配置的URL
            proxy_pass http://localhost:5000/;
        }
    }