nginx部署vue项目(成功版)

本文详细介绍了将Vue项目部署到Nginx的全过程。包括Nginx的介绍与下载,Vue项目的打包,将打包后的项目安装到Nginx,修改Nginx配置文件,以及Nginx的启动、关闭操作。此外,还列举了常见报错及解决办法,帮助开发者顺利完成部署。

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

1、nginx介绍

2、下载nginx

3、打包vue项目

4、把vue项目安装到nginx

5、修改nginx配置文件

6、启动、关闭nginx

7、报错及解决

 

1、nginx介绍

nginx是一个高性能的HTTP和反向代理服务器。因此常用来做静态资源服务器和后端的反向代理服务器。

2、下载nginx

http://nginx.org/en/download.html,下载稳定版 Stable version

3、打包vue项目

vue项目文件目录下运行命令:npm run build,将项目打包好,然后当前项目目录下有一个dist文件夹,该文件夹下有一个index.html和static文件夹。

4、把vue项目安装到nginx

把打包好的dist文件夹拷贝到安装nginx里的html文件夹下

5、修改nginx配置文件

配置文件为conf下的nginx.conf,修改nginx.conf中的server配置片段

server { listen       8887;

        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {

            root   C:/nginx-1.18.01/html/dist/; #nginx里html的dist文件夹路径

            index  index.html index.htm;

        }

        #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件

        #因此需要rewrite到index.html中,然后交给路由在处理请求资源

        location @router {

            rewrite ^.*$ /index.html last;

        }

        # location / {

        #     root   html;

        #     index  index.html index.htm;

        # }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html

        #

        error_page   500 502 503 504  /50x.html;

        location = /50x.html {

            root   html;

        } #....... }

6、启动、关闭nginx

启动 start nginx.exe

关闭 nginx -s stop    或者    nginx -s quit

stop表示立即停止nginx,不保存相关信息

quit表示正常退出nginx,并保存相关信息

重新加载配置文件 nginx -s reload

浏览器中访问:http://localhost:88887

7、报错及解决

7.1 nginx: [error] CreateFile() "E:\nginx\nginx-1.9.3/logs/nginx.pid" failed

使用命令创建/logs/nginx.pid文件:nginx -c conf/nginx.conf

7.2 CreateDirectory() "D:\abc\nginx-1.9.3/temp/client_body_temp" failed (3: The system cannot find the path specified)

进入ng根目录,创建temp/client_body_temp目录,重启nginx,恢复正常。

7.3 nginx: [emerg] invalid number of arguments in "root" directive in nginx/nginx.conf:41

因为命名的文件是会以文件路径的形式出现在nginx的配置文件中的,而且配置文件中是不允许文件路径中存在空格的。

### 使用 Nginx 部署 Vue.js 前端应用 为了使 Vue.js 应用能够在生产环境中稳定运行,Nginx 的配置至关重要。以下是详细的配置说明: #### 1. 安装 Nginx 确保服务器已经安装了最新本的 Nginx。对于大多数 Linux 发行来说,可以通过包管理器来快速安装。 ```bash sudo apt update && sudo apt install nginx ``` #### 2. 构建并上传 Vue.js 应用 构建 Vue.js 项目以生成用于生产的静态资源文件,并将其放置于 Web 可访问的位置。通常情况下,这涉及到执行 `npm run build` 或者类似的命令,在项目的根目录下创建一个名为 `dist/` 的文件夹[^1]。 #### 3. 修改默认站点配置 编辑 `/etc/nginx/sites-available/default` 文件或者为特定的应用创建一个新的 `.conf` 文件放在 `/etc/nginx/conf.d/` 下面。这里提供了一个基本的例子供参考: ```nginx server { listen 80; server_name example.com; root /path/to/dist/; index index.html index.htm; location / { try_files $uri $uri/ /index.html; } error_page 500 502 503 504 /50x.html; } ``` 这段配置中的关键是 `try_files` 指令,它告诉 Nginx 尝试加载指定路径下的文件;如果没有找到,则返回 `index.html` 页面。这对于单页应用程序 (SPA) 特别有用,因为所有的路由都在客户端处理[^2]。 #### 4. 处理常见的 404 错误 当用户尝试访问不存在的 URL 路径时,默认行为可能会导致浏览器显示 404 Not Found 页面。为了避免这种情况发生,应该调整上述配置中的 `location / {}` 部分,使其总是指向入口 HTML 文档,从而让 JavaScript 运行环境接管剩余的工作流[^3]。 #### 5. 测试与重启服务 保存更改后的配置文件后,建议先测试一下语法是否有错误: ```bash sudo nginx -t ``` 确认无误后再重新启动 Nginx 服务使得新设置生效: ```bash sudo systemctl restart nginx ``` 通过以上步骤就可以成功地使用 Nginx 来托管 Vue.js 单页面应用了。当然,根据具体需求还可以做更多定制化操作,比如启用 HTTPS 加密连接、设置缓存策略等。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值