前端项目打包使用nginx本地服务器运行

1.下载安装nginx

nginx: 下载nginx 中文网提供nginx中文文档nginx下载等内容icon-default.png?t=N7T8https://nginx.p2hp.com/en/download.html

        稳定版就可以,下载完后将下载的压缩包解压

2.修改配置文件

        主要修改端口,以及项目所在文件夹,直接放html下就行

 

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   D:/Downloads/nginx-1.24.0/html/dist/;
            index  index.html index.htm;
        }

  • 注意 \ 要改为 /
  • 最后也要有 /

3.运行nginx

### 如何在 Windows 服务器上用 Nginx 部署前端项目 #### 安装 Nginx 为了在 Windows 上部署前端项目,首先需要安装 Nginx。可以通过命令行输入 `start nginx.exe` 来启动服务;或者直接双击 `nginx.exe` 可执行文件来运行 Nginx[^2]。 #### 准备前端项目 确保前端项目已经构建完成并生成了静态资源文件。通常这些文件会被放置在一个名为 `dist` 的目录中。这个过程可能涉及使用构建工具如 Webpack 或者 Vue CLI 进行打包操作。 #### 设置 Nginx 配置文件 编辑 Nginx 的配置文件以指向前端项目的根目录。对于采用 HTML5 History 模式的单页应用(SPA),特别需要注意的是设置正确的路径映射规则: ```nginx server { listen 80; server_name localhost; location / { root html/data/dist; # 修改为实际存放 dist 文件的位置 index index.html index.htm; try_files $uri $uri/ /index.html; # 支持HTML5路由模式 } } ``` 上述配置中的 `html/data/dist` 应该替换为你自己创建用于存储前端编译后文件的具体路径,比如如果是在 Nginx 根目录下新建了一个叫 `data` 的文件夹并将 `dist` 放入其中的话就按照这种方式指定[^5]。 #### 启动与验证 当所有的准备工作完成后,在命令提示符窗口中再次启动 Nginx (`start nginx.exe`) 并打开浏览器访问 http://localhost:8080 ,应该能够看到正常加载的前端应用程序界面这表明部署工作顺利完成[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值