Vue Nginx 发布部署

  1. 安装部署Nginx:Nginx windows 安装部署
  2. 编译Vue程序:npm run build 
  3. 生成dist文件夹里面的文件如下:
  4. 将dist文件夹拷贝到:D:\nginx-1.18.0\html目录下面
  5. 配置:D:\nginx-1.18.0\conf\nginx.conf文件
    
    worker_processes  1;
    
    events {
        worker_connections  1024;
    }
    
    http {
        include       mime.types;
        default_type  application/octet-stream;
        sendfile        on;
        keepalive_timeout  65;
        server {
            listen       8088;//配置访问端口
            server_name  localhost;
    
     	    location / {
                //配置文件路径
                root   D:/nginx-1.18.0/html/dist;
                index  index.html index.htm;
            }
    
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }
    }
    

     

  6. 配置完成,运行:http://localhost:8088 

Vue是一个用于构建用户界面的渐进式JavaScript框架,而Node.js是一个基于Chrome V8引擎的JavaScript运行环境。而nginx则是一个高性能的Web服务器和反向代理服务器。当我们要将Vue应用部署Nginx服务器上时,一般需要先在Nginx配置文件中指定Vue应用的路径和端口。 首先,我们需要在Nginx的配置文件中指定Vue应用的根目录和端口。这可以通过修改nginx.conf文件来实现。根据引用中的信息,可以看到nginx的默认配置文件位于/usr/local/etc/nginx/nginx.conf。你可以使用文本编辑器打开该文件,并根据你的实际路径和端口设置来修改其中的相关配置。 在nginx.conf文件中,你需要找到类似于下面的配置代码段: ``` server { listen 8080; server_name localhost; location / { root /usr/local/var/www; index index.html; try_files $uri $uri/ /index.html; } } ``` 在这个代码段中,listen指令指定了Nginx监听的端口为8080,root指令指定了Vue应用的根目录为/usr/local/var/www,index指令指定了默认的索引文件为index.html。这样配置后,当访问localhost:8080时,Nginx会将请求转发到指定的Vue应用根目录下,并返回index.html文件。 接下来,你需要将Vue应用的构建产物(通常是一个打包后的静态文件夹)放置在指定的根目录下。你可以运行Vue项目的构建命令,将构建产物生成到/usr/local/var/www目录中。 最后,你可以通过在终端中输入nginx命令来启动Nginx服务器。根据引用中的信息,该命令可以直接使用,无需加sudo。 综上所述,将Vue应用部署Nginx服务器上的步骤包括: 1. 修改Nginx配置文件nginx.conf,指定Vue应用的根目录和端口; 2. 将Vue应用的构建产物放置到指定的根目录中; 3. 启动Nginx服务器。 请注意,以上步骤中的具体路径和配置可能因个人环境而异,请根据你的实际情况进行相应的修改和配置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue项目如何部署nginx服务器](https://blog.csdn.net/weixin_43638968/article/details/109636044)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值