一、項(xiàng)目打包

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

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

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

2.1. 搭建一個(gè)node后臺(tái)服務(wù)

新建一個(gè)文件夾my_server

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

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

npm i express

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

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

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

2.2. 將vue項(xiàng)目打包成dist文件

vue項(xiàng)目打包

npm run build

打包后的dist文件如下

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

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

2.4. 啟動(dòng)node服務(wù)

node .\server.js

2.5. 訪(fǎng)問(wèn)http://localhost:8088即可看到你的項(xiàng)目頁(yè)面

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

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

2.6.1. 方式一：將路由模式由history改為hash

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

2.6.2. 方式二：在server.js中將所有的請(qǐng)求匹配都返回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. 解決請(qǐng)求代理跨域的問(wèn)題

出現(xiàn)原因：我們?cè)诒镜?code>npm run serve/dev的時(shí)候，vue-cli會(huì)幫我們啟動(dòng)一個(gè)代理服務(wù)器，但是打包以后，瀏覽器直接運(yùn)行js、css、html，是沒(méi)有代理服務(wù)器的，這個(gè)時(shí)候需要有一個(gè)插件去充當(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 簡(jiǎn)介

Nginx(發(fā)音為“engine-x”)是一款高性能的 HTTP 服務(wù)器和反向代理服務(wù)器，同時(shí)也是一個(gè)IMAP/POP3/SMTP 代理服務(wù)器。Nginx最初由 lgor Sysoev 編寫(xiě)，于 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部署前端項(xiàng)目

將下載下來(lái)的nginx解壓，并打開(kāi)

打開(kāi)conf文件目錄下面的nginx.conf

我們找到html文件夾

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

運(yùn)行nginx.exe

瀏覽器訪(fǎng)問(wèn)http://localhost:80即可看到你的項(xiàng)目

3.4. 解決history路由跳轉(zhuǎn)后，刷新瀏覽器，頁(yè)面報(bào)404的問(wèn)題

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

打開(kāi)nginx.conf文件，添加如下代碼

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

3.5. 解決接口代理問(wèn)題

打開(kāi)nginx.conf文件，添加如下代碼

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

3.6. 重啟nginx

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

重新雙擊nginx.exe啟動(dòng)

3.7. 瀏覽器訪(fǎng)問(wèn)http://localhost:80即可解決3.4和3.5的問(wèn)題

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

4.1. 購(gòu)買(mǎi)云服務(wù)器獲取公網(wǎng)ip

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

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

用戶(hù)名默認(rèn) root

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

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

4.5. 使用Xshell安裝nginx

yum install nginx

輸入y回車(chē)

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

4.6. Xftp配置nginx.conf

找到etc/nginx

配置nginx.config

4.7. Xsheel啟動(dòng)nginx

service nginx start

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

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

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

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

最新評(píng)論