【Nginx 】Nginx 部署前端 vue 项目

1. 项目打包

1.1 安装依赖

在项目部署之前，确保开发环境中已安装Node.js和npm，这是运行Vue项目的基础。通过执行npm install命令，可以安装项目所需的所有依赖。这一步是打包流程的前提，确保了后续编译的顺利进行。

根据npm的官方数据，npm install命令在安装依赖时，会根据package.json文件中列出的依赖项进行下载和安装，这个过程通常需要联网操作，并且依赖于npm仓库的响应速度。在网络状况良好的情况下，安装过程可以顺利完成。

1.2 编译项目

项目依赖安装完成后，接下来需要编译Vue项目。编译过程是通过执行npm run build命令来完成的，该命令会触发Vue CLI中的构建脚本，将源代码转换为浏览器可以理解的静态资源。

编译过程中，Webpack作为模块打包器，会根据配置文件vue.config.js中的规则，对项目中的JavaScript、CSS、图片等资源进行打包和优化。这个过程包括代码的压缩、合并、分割等多个步骤，以确保最终生成的静态资源既高效又轻量。

根据Vue CLI的官方文档，编译后的资源会被放置在项目根目录下的dist文件夹中。这个文件夹包含了所有用于生产环境的静态文件，如HTML、CSS、JavaScript等。这些文件是部署到Nginx服务器上的核心内容。

在编译过程中，还可以通过添加环境变量来指定不同的构建环境，例如开发环境、测试环境和生产环境。这样可以确保在不同环境下构建的资源具有相应的优化和配置。

2. 安装Nginx

2.1 Ubuntu/Debian系统

在Ubuntu或Debian系统上安装Nginx通常涉及以下步骤，这些步骤可以确保用户能够快速且正确地安装Nginx服务器。

• 软件更新：首先，执行sudo apt-get update命令来更新本地软件包索引。这一步是必要的，因为它确保了在安装过程中能够获取到最新的软件包版本。
• 安装Nginx：通过执行sudo apt-get install nginx命令来安装Nginx。这个过程会自动处理依赖关系，并安装Nginx及其所需的所有组件。
• 启动服务：安装完成后，使用sudo systemctl start nginx命令启动Nginx服务。这是确保Nginx能够正常工作的第一步。
• 验证安装：为了验证Nginx是否正确安装和运行，可以通过访问http://localhost或服务器的IP地址来查看Nginx的欢迎页面。如果页面加载成功，说明Nginx已经成功运行。

2.2 CentOS/RHEL系统