Vue前端项目部署的三种方案

一、项目打包

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

二、使用node本地服务器部署

好处： 在一个局域网内，任意一个设备都可以通过ip访问项目

2.1. 搭建一个node后台服务

• 新建一个文件夹my_server

• 初始化package.json，cmd执行npm init -y

• 安装插件express（是一个快速搭建服务的插件）

npm i express

• my_server目录下新建server.js，代码如下：

// 引入express
const express = require("express");
// 配置端口号
const PORT = 8088;
// 创建一个app服务实例
const app = express();
// 配置静态资源
app.use(express.static(__dirname + "/public"));

// 绑定端口监听
app.listen(PORT, () => {
  console.log(`本地服务器启动成功，http://localhost:${PORT}`);
});

• my_server目录下新建public文件夹（用于存放打包后的index.html、js、css）

• 项目目录结构如下：

2.2. 将vue项目打包成dist文件

• vue项目打包

npm run build

• 打包后的dist文件如下

2.3. 将dist文件下面的资源交给express托管

• 将2.2打包后的dist目录下面的文件复制到my_server下面的public目录下

2.4. 启动node服务

node .\server.js

2.5. 访问http://localhost:8088即可看到你的项目页面

2.6. 解决history路由跳转后，刷新浏览器，页面报404的问题

出现原因：history路由在部署上去之后，前端跳转的路由会被认定为是/xxxx的get请求

2.6.1. 方式一：将路由模式由history改为hash

const router = new VueRouter({
  mode: 'hash', // history改为hash
  base: process.env.BASE_URL,
  routes
})

2.6.2. 方式二：在server.js中将所有的请求匹配都返回index.html

// 将所有的请求匹配都返回index.html，将接口处理转交给js处理
app.get("*", (req, res) => {
  res.sendFile(__dirname, "/public/index.html");
});

2.6.2. 方式三：使用第三方的插件connect-history-api-fallback

• 安装插件

npm i connect-history-api-fallback

• 引入插件

// history路由刷新404解决
const history = require("connect-history-api-fallback");

• 配置插件（必须放到配置静态资源之前）

// 必须放到配置静态资源之前
app.use(history());
// 配置静态资源
app.use(express.static(__dirname + "/public"));

2.7. 解决请求代理跨域的问题

出现原因：我们在本地npm run serve/dev的时候，vue-cli会帮我们启动一个代理服务器，但是打包以后，浏览器直接运行js、css、html，是没有代理服务器的，这个时候需要有一个插件去充当代理服务器的角色

• 安装插件：http-proxy-middleware

npm i http-proxy-middleware

• 引入插件

// 引入http代理服务器插件
const { createProxyMiddleware } = require("http-proxy-middleware");

• 配置代理服务器

// 配置代理服务器
app.use(
  "/api",
  createProxyMiddleware({
    target: "http://www.example.org/secret",
    changeOrigin: true,
    pathRewrite: { "^/api": "" },
  })
);

三、nginx服务器部署

3.1. nginx 简介

Nginx(发音为“engine-x”)是一款高性能的 HTTP 服务器和反向代理服务器，同时也是一个IMAP/POP3/SMTP 代理服务器。Nginx最初由 lgor Sysoev 编写，于 2004年发布。它以其高性能、高稳定性、丰富的功能集和低系统资源消耗而闻名，主要功能有:

• 反向代理
• 负载均衡
• 静态内容服务
• HTTP/2 支持
• SSL/TLS 支持
• 高速缓存

3.2. nginx的下载

下载地址：http://nginx.org

3.3. 使用nginx部署前端项目

• 将下载下来的nginx解压，并打开

• 打开conf文件目录下面的nginx.conf

• 我们找到html文件夹

• 把打包后的dist文件目录下面的文件放到html目录

• 运行nginx.exe

• 浏览器访问http://localhost:80即可看到你的项目
  

3.4. 解决history路由跳转后，刷新浏览器，页面报404的问题

出现原因：history路由在部署上去之后，前端跳转的路由会被认定为是/xxxx的get请求

• 打开nginx.conf文件，添加如下代码

try_files $uri $uri/ /index.html; # 解决刷新404

3.5. 解决接口代理问题

• 打开nginx.conf文件，添加如下代码

location /dev/ {
   # 设置代理目标
   proxy_pass http://www.example.org/secret
}

3.6. 重启nginx

• 找到任务管理器，关闭nginx进程
  

• 重新双击nginx.exe启动

3.7. 浏览器访问http://localhost:80即可解决3.4和3.5的问题

四、云服务器部署

4.1. 购买云服务器获取公网ip

阿里云、腾讯云都可以购买，购买完成可以获取到公网ip

4.2. 使用Xshell连接你的公网ip

• 用户名默认 root

4.3. 使用Xftp连接你的公网ip

4.4. 通过Xftp将打包后的dist文件下面的静态资源放置到云服务器

• var下面新建文件夹 sph（用来放置你的静态资源存放地址）

4.5. 使用Xshell安装nginx

yum install nginx

• 输入y回车

• 出现Complete说明安装成功

4.6. Xftp配置nginx.conf

找到etc/nginx

• 配置nginx.config

4.7. Xsheel启动nginx

service nginx start

4.8. 浏览器输入 http://你的公网ip就可以访问你的项目了

浏览器输入 http://你的公网ip就可以访问你的项目了

4.9. 如果觉得ip不好看，可以买个域名和自己的公网ip绑定