【项目上线】项目上线操作步骤

目录

1. 项目打包

2. 本地服务器部署

2.1. 具体操作步骤

2.2. 解决刷新 404 问题

2.3. 请求无法发送问题

3. nginx 服务器部署

3.1. nginx 简介

3.2. nginx 配置代理练习

3.3. nginx 部署前端项目

4. 云服务器部署

---

1. 项目打包

• 我们开发用的脚手架其实就是一个微型服务器，用于：支撑开发环境、运行代理服务器等。
• 打包完的文件中不存在：.vue、.jsx、.less 等文件，而是：html、css、js等。
• 打包后的文件，不再借助脚手架运行，而是需要部署到服务器上运行。
• 打包前，请务必梳理好前端项目的ajax封装（请求前缀、代理规则等）。

2. 本地服务器部署

2.1. 具体操作步骤

• 第一步：准备一个本地的服务器

本地服务器可以用：Java、Php、Go、Node.js 等语言编写，本教程采用是Node.js编写服务器，端口号为：8088，且已经配置了public文件夹为静态资源。

点击下载服务器：

• 第二步：进行前端项目打包

具体的打包命令，可以参考package.json中的scripts字段配置。

• 第三步：将打包结果交给服务器

将打包生成的文件内容，放到服务器的静态资源文件夹中（上文中的public文件夹）

• 第四步：测试访问前端项目

浏览器访问：http://localhost:8088即可看到我们的项目，但此时会遇到两个问题：

1. 页面刷新 404
2. ajax 请求无法发送

2.2. 解决刷新 404 问题

问题分析：前端项目的路由，通常分为两种工作模式，分别为：

1. hash模式

hash 值又称锚点，通常用于指定网页中的某个位置，例如下面的网址：

央视网_世界就在眼前，其中的#SUBD1605080062959435就是 hash 值，hash 值只在客户端（如浏览器）中使用，是不会带给服务器的，所以使用 hash 模式时，