nginx部署vue项目

最新推荐文章于 2025-07-01 15:31:34 发布

原创最新推荐文章于 2025-07-01 15:31:34 发布 · 481 阅读

0 ·

CC 4.0 BY-SA版权

Nginx 专栏收录该内容

3 篇文章

订阅专栏

博客介绍了信息技术相关操作，包括下载解压nginx安装包并编译安装，运行nginx；修改vue项目静态资源路径后打包；介绍Vue Router的hash和history两种方式；修改nginx配置文件，刷新配置并重启以访问页面。

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

1、安装nginx服务器：

（1）下载nginx安装包并解压：下载链接;
（2）进入nginx解压目录中编译安装：

./configure --prefix=/usr/local/nginx（必须先建好目录）
make
make install

（3）进入usr/local/nginx/sbin目录运行nginx：./nginx，访问80端口即可看到nginx启动成功；

2、打包vue项目：

（1）修改config/index.js文件中的静态资源路径：assetsPublicPath: './',
（2）打包：npm run build，在项目目录下即可看到打包后的dist目录，用浏览器打开该目录下的index.html文件即可看到效果；

3、Vue Router的两种方式（hash、history）。

4、配置nginx:
（1）修改nginx安装目录下的配置文件(usr/local/nginx/conf/nginx.conf)：

	
# 工作进程数
worker_processes  1;

# 工作模式与连接数设置
events {
	# 参考事件模型，use [ kqueue | rtsig | epoll | /dev/poll | select | poll ]; 
	use epoll;
	# 单进程最大连接数
    worker_connections  1024;
}


http {
	
	# mime与文件类型映射
    include       mime.types;
    # 默认文件类型
    default_type  text/html;
    # 关闭日志
    #access_log off
    # 日志格式化
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    # 日志文件位置        
    access_log  logs/access.log  main;
    # 是否打开以 sendfile 方式传输文件
    sendfile on;
    # 连接超时时间，o 表示无限制
    keepalive_timeout  65;

    ##################### vue项目部署 ###################################
    
    # vue项目打包后的dist目录位置
    root /home/lyq/Desktop/vue-learn/dist;

    server {
    	
    	location / {
            # hash模式只配置访问html
            # index  index.html; 
            # history模式下
    		try_files $uri $uri/ /index.html; 
        	# try_files $uri $uri/ @router;
        }

        error_page 500 503 504;
        location = /50x.html {
        	root html;
        }
    }
}

（2）刷新nginx配置并重启：./nginx -s reload;

（3）访问localhost:80即可看到页面。