Nginx 部署前端 Vue 项目实战指南

一、环境准备

1. 安装 Nginx

首先,需要在服务器上安装 Nginx。Nginx 是一款轻量级、高性能的 HTTP 和反向代理服务器。安装方式因操作系统而异。

  • Linux 系统(以 Ubuntu 为例)

    bash 复制代码
    sudo apt-get update
    sudo apt-get install nginx
  • Windows 系统

    从 Nginx 官方网站下载安装包,按照安装向导进行安装。

2. 安装 Node.js

Vue 项目的运行依赖 Node.js 环境。访问 Node.js 官方网站(https://nodejs.org/en/),下载适合您操作系统的安装包并进行安装。安装完成后,在命令行中输入 node -vnpm -v 来验证安装是否成功。

3. 准备 Vue 项目

确保您有一个可以正常运行的 Vue 项目。如果还没有,可以使用 Vue CLI 来创建一个新项目。

bash 复制代码
npm install -g @vue/cli
vue create my-vue-project

在项目开发完成后,使用以下命令进行打包:

bash 复制代码
npm run build

打包完成后,会生成 dist 文件夹,用于后续的 Nginx 部署。

二、项目打包

(一)打包命令

在 Vue 项目中,可以使用 npm run build 命令来打包项目。在执行此命令之前,需要确保路由配置中的模式正确。如果使用了 history 模式,可能会在打包部署后出现问题,建议将其修改为 hash 模式或者直接注释掉 mode 这一配置项。

javascript 复制代码
const router = new VueRouter({
  /*mode: 'history',*/
  mode: 'hash',
  routes: []
})

另外,还需要对项目中的一些配置文件进行修改,比如在 vue.config.js 文件中添加路径配置 publicPath: './',以确保打包后的资源路径正确。

(二)常见问题与解决

  • 路径报错 :在打包过程中,可能会出现路径报错的情况。常见的解决方法是在 config/index.js 中,将 assetsPublicPath: '/' 修改为 assetsPublicPath: './'。如果项目中使用了自定义的打包配置文件,如 vue.config.js,也要确保其中的路径配置正确。
  • 页面空白 :页面空白是打包后常见的问题之一。可能的原因包括路径配置错误、路由模式不正确等。路径配置方面,按照上述提到的修改 assetsPublicPath 的方法进行处理。路由模式上,如果使用了 history 模式且没有后端的相应配置,建议将其修改为 hash 模式。另外,还需要检查图片、字体等资源的路径是否正确,必要时在相关配置文件中进行调整。

三、Nginx 配置与部署

(一)Nginx 安装

  • Windows 系统

    您可以从 Nginx 官方网站下载安装包,然后按照安装向导进行安装。安装完成后,可在命令行中输入 nginx 启动 Nginx 服务。

  • Linux 系统(以 CentOS 为例)

    bash 复制代码
    sudo yum install -y gcc-c++ pcre pcre-devel zlib zlib-devel openssl openssl-devel
    sudo wget http://nginx.org/download/nginx-1.22.1.tar.gz
    sudo tar -zxvf nginx-1.22.1.tar.gz
    cd nginx-1.22.1
    sudo ./configure
    sudo make
    sudo make install
  • macOS 系统

    bash 复制代码
    brew install nginx

(二)项目部署

首先,将打包生成的 dist 文件夹移动到 Nginx 的相关目录。在 Windows 系统中,通常为 C:\nginx\html;在 Linux 系统中,可能为 /usr/local/nginx/html

然后,修改 Nginx 的配置文件(通常为 nginx.conf)。找到 server 部分,设置项目的根目录和相关路由。

最后,重新启动 Nginx 服务使配置生效。

(三)配置修改

要修改 Nginx 的配置文件,例如修改端口,可在 nginx.conf 文件中找到 listen 指令,将默认的 80 端口修改为您想要的端口,如 listen 8080;

修改服务名称,在 server_name 指令后指定新的名称,如 server_name myvueproject.com;

修改完成后,保存配置文件,并在命令行中执行相应命令重启 Nginx 服务。在 Linux 系统中,通常使用 sudo systemctl restart nginx 命令;在 Windows 系统中,可通过任务管理器结束 Nginx 进程后重新启动。

四、访问与验证

(一)启动 Nginx 服务

  • Windows 系统

    按组合键【win+r】打开 "运行" 对话框,输入 cmd,回车打开 cmd 命令行窗口。在打开的 cmd 命令窗口中利用 cd 命令切换到 Nginx 服务安装的目录。输入命令:start nginx.exe,回车,即可启动 Nginx 服务。可以在任务管理器的进程中看到启动的 Nginx 服务。

  • Linux 系统

    bash 复制代码
    sudo systemctl start nginx
    sudo /etc/init.d/nginx start

    可以使用以下命令检查服务状态:

    bash 复制代码
    sudo systemctl status nginx
    sudo /etc/init.d/nginx status
  • macOS 系统

    打开终端,输入 brew services start nginx 启动 Nginx 服务。

(二)通过浏览器访问验证部署是否成功

在浏览器地址栏中输入 http://localhost(如果修改了端口,则输入 http://localhost:端口号)。如果出现 Vue 项目的页面,说明部署成功。如果出现 404 错误或者其他错误页面,需要检查 Nginx 配置、项目路径等是否正确。

相关推荐
别拿曾经看以后~31 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死34 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍