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

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

2.6.3. 方式三：使用第三方的插件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绑定

到此这篇关于Vue前端项目部署的三种方案的文章就介绍到这了,更多相关Vue前端项目部署内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论