一、項目打包

• 我們開發(fā)用的腳手架其實就是一個微型服務(wù)器，用于：支撐開發(fā)環(huán)境、運行代理服務(wù)器等。
• 打包完的文件中不存在：.vue、.jsx 、.less 等文件，而是：html、js、css等
• 打包后的文件，不再借助腳手架運行，而是需要部署到服務(wù)器上運行。
• 打包前，請務(wù)必梳理好前端項目的 ajax 封裝(請求前綴、代理規(guī)則等)

二、使用node本地服務(wù)器部署

好處： 在一個局域網(wǎng)內(nèi)，任意一個設(shè)備都可以通過ip訪問項目

2.1. 搭建一個node后臺服務(wù)

新建一個文件夾my_server

初始化package.json，cmd執(zhí)行npm init -y

安裝插件express（是一個快速搭建服務(wù)的插件）

npm i express

my_server目錄下新建server.js，代碼如下：

// 引入express
const express = require("express");
// 配置端口號
const PORT = 8088;
// 創(chuàng)建一個app服務(wù)實例
const app = express();
// 配置靜態(tài)資源
app.use(express.static(__dirname + "/public"));
// 綁定端口監(jiān)聽
app.listen(PORT, () => {
  console.log(`本地服務(wù)器啟動成功，http://localhost:${PORT}`);
});

• my_server目錄下新建public文件夾（用于存放打包后的index.html、js、css）
• 項目目錄結(jié)構(gòu)如下：

2.2. 將vue項目打包成dist文件

vue項目打包

npm run build

打包后的dist文件如下

2.3. 將dist文件下面的資源交給express托管

將2.2打包后的dist目錄下面的文件復(fù)制到my_server下面的public目錄下

2.4. 啟動node服務(wù)

node .\server.js

2.5. 訪問http://localhost:8088即可看到你的項目頁面

2.6. 解決history路由跳轉(zhuǎn)后，刷新瀏覽器，頁面報404的問題

出現(xiàn)原因：history路由在部署上去之后，前端跳轉(zhuǎn)的路由會被認(rèn)定為是/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");

配置插件（必須放到配置靜態(tài)資源之前）

// 必須放到配置靜態(tài)資源之前
app.use(history());
// 配置靜態(tài)資源
app.use(express.static(__dirname + "/public"));

2.7. 解決請求代理跨域的問題

出現(xiàn)原因：我們在本地npm run serve/dev的時候，vue-cli會幫我們啟動一個代理服務(wù)器，但是打包以后，瀏覽器直接運行js、css、html，是沒有代理服務(wù)器的，這個時候需要有一個插件去充當(dāng)代理服務(wù)器的角色

安裝插件：http-proxy-middleware

npm i http-proxy-middleware

引入插件

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

配置代理服務(wù)器

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

三、nginx服務(wù)器部署

3.1. nginx 簡介

Nginx(發(fā)音為“engine-x”)是一款高性能的 HTTP 服務(wù)器和反向代理服務(wù)器，同時也是一個IMAP/POP3/SMTP 代理服務(wù)器。Nginx最初由 lgor Sysoev 編寫，于 2004年發(fā)布。它以其高性能、高穩(wěn)定性、豐富的功能集和低系統(tǒng)資源消耗而聞名，主要功能有:

• 反向代理
• 負(fù)載均衡
• 靜態(tài)內(nèi)容服務(wù)
• 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路由跳轉(zhuǎn)后，刷新瀏覽器，頁面報404的問題

出現(xiàn)原因：history路由在部署上去之后，前端跳轉(zhuǎn)的路由會被認(rèn)定為是/xxxx的get請求

打開nginx.conf文件，添加如下代碼

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

3.5. 解決接口代理問題

打開nginx.conf文件，添加如下代碼

location /dev/ {
   # 設(shè)置代理目標(biāo)
   proxy_pass http://www.example.org/secret
}

3.6. 重啟nginx

找到任務(wù)管理器，關(guān)閉nginx進程

重新雙擊nginx.exe啟動

3.7. 瀏覽器訪問http://localhost:80即可解決3.4和3.5的問題

四、云服務(wù)器部署

4.1. 購買云服務(wù)器獲取公網(wǎng)ip

阿里云、騰訊云都可以購買，購買完成可以獲取到公網(wǎng)ip

4.2. 使用Xshell連接你的公網(wǎng)ip

用戶名默認(rèn) root

4.3. 使用Xftp連接你的公網(wǎng)ip

4.4. 通過Xftp將打包后的dist文件下面的靜態(tài)資源放置到云服務(wù)器 var下面新建文件夾 sph（用來放置你的靜態(tài)資源存放地址）

4.5. 使用Xshell安裝nginx

yum install nginx

輸入y回車

出現(xiàn)Complete說明安裝成功

4.6. Xftp配置nginx.conf

找到etc/nginx

配置nginx.config

4.7. Xsheel啟動nginx

service nginx start

4.8. 瀏覽器輸入 http://你的公網(wǎng)ip就可以訪問你的項目了

瀏覽器輸入 http://你的公網(wǎng)ip就可以訪問你的項目了

4.9. 如果覺得ip不好看，可以買個域名和自己的公網(wǎng)ip綁定

到此這篇關(guān)于Vue前端項目部署的三種方案的文章就介紹到這了,更多相關(guān)Vue前端項目部署內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論