window下载linux(Ubuntu)或window nginx+vue发布及部署

本文介绍如何在Windows和Linux环境下部署Nginx服务器,并详细解释了配置过程及注意事项,特别关注Vue项目的部署。

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

linux(虚拟机)或window nginx+vue发布及部署

window下部署nginx

1.下载nginx

下载nginx ,一般选择稳定版

2.启动nginx

(1)直接双击nginx.exe,双击后一个黑色的弹窗一闪而过
(2)打开cmd命令窗口,切换到nginx解压目录下,输入命令 nginx.exe 或者 start nginx ,回车即可
直接在浏览器地址栏输入网址 http://localhost:80,回车,出现以下页面说明启动成功

在这里插入图片描述

3.将发布的文件放在html中

把打包的文件或者要发布的文件直接放在html的路径下

4.修改conf文件

找到conf下的nginx.conf修改配置 简单的配置

// An highlighted block
server {
        listen       8082; //配置的端口
        server_name  localhost; //定义访问地址
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / { // 对以/结尾的地址进行负载均衡
            root   html\dist; //地址
            index  index.html index.htm; 
            try_files $uri $uri/ @router; # 需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
        }
        location @router {
        rewrite ^.*$ /index.html last;
         }
        #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;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        location ~ \.php$ {
            proxy_pass   http://127.0.0.1; //服务器地址
        }
    }

linux下部署nginx

1.首先安装虚拟机

1、 VMware软件
下载(网盘-提取码:eom3)
2、Linux系统
下载(网盘-提取码:erhb)

2.在VMware上安装linux系统(无说明就是默认点击下一步)

1、打开VMware界面如下所示

选择高级,点击下一步

在这里插入图片描述
点击下一步

在这里插入图片描述
在这里插入图片描述
将下载的linux系统的包选中
在这里插入图片描述
输入你的信息,然后点击下一步
在这里插入图片描述
路径最好久默认
在这里插入图片描述
点击下一步
在这里插入图片描述
在这里插入图片描述
如无特殊情况,使用网络地址转换,然后点击下一步
在这里插入图片描述
选择默认类型,然后点击下一步
在这里插入图片描述
在这里插入图片描述
如无特殊情况,选择创建新的虚拟磁盘,然后点击下一步
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
核对虚拟机的各种参数,然后点击完成,虚拟机即会自动安装完成
在这里插入图片描述
等待更新
在这里插入图片描述
更新完成后,输入密码就下载好了

ubuntu 中文设置


然后我们下载中文
在这里插入图片描述
在这里插入图片描述
下载完成后,我们可以找到这里将它拖到第一行
在这里插入图片描述
变成这样就说明成功了,重启一下就ok了

linux nginx下载及配置

然后我们打开终端 下载npm
sudo apt install npm
npm下载完 用npm下载nginx(需要root)
npm i nginx -g
在这里插入图片描述
我们可以看到nginx下载完成并且是全局的
我们启动
在这里插入图片描述
ok是没有问题的
ps -ef | grep nginx 查看nginx 在哪

与window不一样的配置

nginx.conf配置文件 /ect/nginx
html文件夹 /usr/share/nginx
更改文件是需要权限的
1.更改目录所有者命令:
chown -R 用户名称 目录名称
2.更改目录权限命令:
chmod -R 755 目录名称
linux 需要开放端口
开启防火墙: systemctl start firewalld
开放指定端口:firewall-cmd --zone=public --add-port=80/tcp --permanent
命令含义: --zong #作用域
–add-port=80/tcp #添加端口,格式为:端口/通讯协议
–permanent #永久生效,没有此参数重启后失效
重启防火墙:firewall-cmd --reload
启动 nginx 停止 nginx -s quit 强制./nginx -s stop 重启./nginx -s reload

剩下配置与widow完全一样

<think>我们正在处理一个关于Vue项目部署Nginx的问题。根据用户的问题,我们需要将Vue项目编译打包并部署Nginx服务器。根据引用内容,我们可以总结出以下步骤: 1. 打包Vue项目:使用npm run build(类似命令,如npm run build:prod)生成dist文件夹。 2. 将dist文件夹放到服务器上(对于LinuxWindows服务器步骤类似)。 3. 在服务器上下载并安装Nginx(如果还没有安装的话)。 4. 配置Nginx,将请求指向dist文件夹中的内容。 5. 启动Nginx服务。 接下来,我们将详细说明这些步骤,并注意引用中提到的关键点。 ### 步骤详解 #### 1. 打包Vue项目 在Vue项目的根目录下,运行打包命令。通常,Vue CLI创建的项目使用以下命令: ```bash npm run build ``` 者,如果项目配置了不同的环境(如生产环境),可能会使用: ```bash npm run build:prod ``` 执行成功后,项目根目录下会生成一个`dist`文件夹,里面包含了所有静态文件(HTML、JS、CSS等)。 #### 2. 将dist文件夹上传到服务器 将本地的`dist`文件夹上传到服务器的某个目录。例如,在Linux服务器上,可以放在`/home/user/dist`;在Windows服务器上,可以放在某个磁盘目录下,如`D:\nginx-html\dist`(注意避免中文路径)。 #### 3. 安装Nginx 如果服务器上还没有安装Nginx,需要先安装。 - **Linux(以CentOS为例)**: ```bash sudo yum install nginx # CentOS # 者 sudo apt-get install nginx # Ubuntu/Debian ``` - **Windows**: 从Nginx官网(https://nginx.org/en/download.html)下载Windows版本的压缩包,解压到任意目录(无中文和空格)。 #### 4. 配置Nginx Nginx的配置文件通常名为`nginx.conf`,位于: - Linux: `/etc/nginx/nginx.conf` `/www/server/nginx/conf/nginx.conf`(根据安装方式不同) - Windows: 解压目录下的`conf/nginx.conf` 我们需要修改配置文件,设置一个server块,将请求指向我们上传的dist目录。 打开配置文件,在`http`块内添加(修改)一个`server`块: ```nginx server { listen 80; # 监听80端口 server_name localhost; # 可以是域名IP location / { root /path/to/dist; # 这里替换为你的dist目录的绝对路径 index index.html index.htm; try_files $uri $uri/ /index.html; # 用于支持Vue的路由history模式 } } ``` 注意: - `root`指令后面是dist文件夹的绝对路径。例如,在Linux上可能是`/home/user/dist`,在Windows上可能是`D:/nginx-html/dist`(注意Windows路径使用正斜杠)。 - 如果Vue项目使用了history模式的路由,需要添加`try_files`指令,以避免刷新页面时出现404错误。 #### 5. 启动Nginx - **Linux**: ```bash sudo systemctl start nginx # 启动 sudo systemctl enable nginx # 设置开机自启 ``` 者使用Nginx的命令行: ```bash sudo nginx # 启动 sudo nginx -s reload # 重新加载配置(修改配置后) sudo nginx -s stop # 停止 ``` - **Windows**: 在Nginx解压目录下,打开命令行: ```cmd start nginx # 启动 nginx -s reload # 重新加载配置 nginx -s stop # 停止 ``` #### 6. 验证 在浏览器中访问服务器的IP地址(域名)和配置的端口(如80端口),应该能看到Vue应用。 ### 常见问题 1. **端口占用**:如果80端口被占用,可以修改`listen`为其他端口,如`8080`,然后访问时加上端口号。 2. **权限问题**:在Linux上,确保Nginx用户(通常为`nginx``www-data`)有权限读取dist目录。 3. **路由问题**:如果使用history模式,确保按照上述配置了`try_files`。 ### 引用说明 在以上步骤中,我们参考了用户提供的引用内容: - 引用[1]提到了打包Vue项目、将dist文件夹放到服务器、下载Nginx以及部署过程[^1]。 - 引用[2]详细说明了在Windows环境下如何放置dist文件夹和修改Nginx配置[^2]。 - 引用[3]提到了使用`nginx -t`命令测试配置文件是否正确[^3]。 ### 相关问题 1. 如何配置Nginx支持Vue的history路由模式? 2. 如何为Vue项目配置不同的环境变量(如开发、测试、生产)? 3. 如何优化Vue项目的打包体积? 4. 如何配置Nginx的HTTPS支持? 5. 如何处理部署后出现的静态资源404问题?</think>### Vue项目编译打包并部署Nginx服务器指南 #### 一、Vue项目打包 1. **安装依赖** 在项目根目录执行: ```bash npm install ``` 2. **编译打包** 执行构建命令生成dist文件夹: ```bash npm run build # 标准命令 # 带环境配置 npm run build:prod ``` 成功后会生成`dist`目录,包含静态资源文件(HTML/CSS/JS)[^1][^2]。 --- #### 二、Nginx环境准备 1. **安装Nginx** - Linux(CentOS): ```bash sudo yum install nginx ``` - Windows: 从[官网下载](https://nginx.org/en/download.html)并解压到无空格/中文路径的目录 2. **验证安装** ```bash nginx -v # 查看版本 nginx -t # 测试配置文件语法[^3] ``` --- #### 三、部署配置 1. **放置dist文件** - Linux: ```bash sudo cp -r dist /usr/share/nginx/html/ ``` - Windows: 将dist文件夹复制到Nginx目录下的`html`文件夹内 2. **修改Nginx配置** 编辑`conf/nginx.conf`: ```nginx server { listen 80; server_name your_domain.com; # 改为服务器IP域名 location / { root html/dist; # dist目录路径 index index.html; try_files $uri $uri/ /index.html; # 支持Vue路由history模式 } } ``` 3. **启动Nginx** ```bash # Linux sudo systemctl start nginx sudo systemctl enable nginx # 开机自启 # Windows start nginx # 在nginx.exe所在目录执行 ``` --- #### 四、验证访问 1. **浏览器访问** `http://服务器IP:端口`(默认80端口可省略) 2. **常见问题排查** - 404错误 → 检查root路径是否正确 - 路由刷新失败 → 确认`try_files`配置存在 - 权限问题 → Linux执行: ```bash sudo chown -R nginx:nginx /usr/share/nginx/html/dist ``` > 提示:生产环境建议配置HTTPS和Gzip压缩提升安全性及加载速度[^1][^2]。 --- ### 相关问题 1. Vue项目如何配置环境变量区分开发/生产环境? 2. Nginx如何配置HTTPS证书实现安全访问? 3. 部署后出现路由刷新404该如何解决? 4. 如何优化Vue项目的打包体积? 5. Nginx有哪些常用性能调优参数? [^1]: Vue开发实战三:Vue编译包LinuxWindow服务器Nginx部署 [^2]: Vue项目打包部署nginx服务器上运行 [^3]: vue 项目部署nginx 服务器
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值