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 配置、项目路径等是否正确。

相关推荐
baiduopenmap15 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish22 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
请叫我欧皇i35 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_37 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun43 分钟前
空间数据存储格式GeoJSON
前端
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520311 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html
brief of gali2 小时前
记录一个奇怪的前端布局现象
前端
计算机毕设指导62 小时前
基于 SpringBoot 的作业管理系统【附源码】
java·vue.js·spring boot·后端·mysql·spring·intellij-idea