一、Vue打包

1、配置vue.config.js文件

將publicPath改為"./"，否則會(huì)出現(xiàn)靜態(tài)文件找不到，從而使index.html文件打開(kāi)空白頁(yè)的問(wèn)題

2、創(chuàng)建config.js文件，并引入index.html中，

創(chuàng)建該文件主要使為了，在vue打包后，后端服務(wù)更改了地址，前端就不需要重新打包，只需要更改打包后的config.js文件的baseUrl（打包后dist文件夾中也會(huì)有config.js文件），就能更改請(qǐng)求地址

config.js文件的內(nèi)容

var ipConfig = {
    baseUrl: 'http://192.168.1.xxx:xxx'   //后端請(qǐng)求地址
  }

將config.js引入到public 的 index.js中

3、在發(fā)起請(qǐng)求的地方使用config.js中的地址

比如我這里，將axios請(qǐng)求封裝起來(lái)，每次請(qǐng)求都使用這個(gè)封裝的axios

如果你沒(méi)有封裝請(qǐng)求，可以在每個(gè)請(qǐng)求地址前都加上window.ipConfig.baseUrl

如：window.ipConfig.baseUrl + “/user/login”

4、打包

使用命令：

npm run build

結(jié)果出先如下情況，則證明打包成功

5、打包后的文件結(jié)構(gòu)如下

二、部署到服務(wù)器中(Linux)

1、將打包后的dist文件夾放到服務(wù)器的某個(gè)文件下

我這里是放到了 /opt/Workspace/test_web下

所以dist文件夾的路徑為/opt/Workspace/test_web/dist,（記住這個(gè)路徑，等下配置ngnix需要）

如果你不知道你的dist文件夾的路徑在哪，你可以使用pwd命令

2、配置ngnix（請(qǐng)先確保你的服務(wù)器已經(jīng)下載了ngnix）

打開(kāi)ngnix配置文件，寫(xiě)入

 server {
        listen       8099;    //端口，別人通過(guò)什么端口來(lái)訪問(wèn)你的前端頁(yè)面
        server_name  localhost;  //填localhost就行，服務(wù)的ip
        root   /opt/Workspace/test_web/dist/;  #vue文件dist的完整路徑 
        sendfile        on;
	    tcp_nopush      on;
	    default_type text/html;
	    location / {
			index  /index.html;
			try_files $uri $uri/ /index.html;
         }
	
		error_page   500 502 503 504  /50x.html;
		location = /50x.html {
			root   html;
		}
    }

3、ngnix重新加載配置文件

退出寫(xiě)模式后，運(yùn)行命令（否則該配置文件不生效）

ngnix reload

三、訪問(wèn)頁(yè)面

接下來(lái)，就可以愉快的訪問(wèn)你的頁(yè)面啦

地址 服務(wù)器地址+你在ngnix中設(shè)置的端口

四、更新

注意：如果你的后端沒(méi)有使用到一個(gè)公共的路徑，那么第四步（更新）可以不看 ，因?yàn)閚ginx無(wú)法配置

使用以上的方法部署前端頁(yè)面有一個(gè)弊端，就是網(wǎng)站攻擊者很容易知道你的服務(wù)器地址，即config.js中設(shè)置的baseUrl。

攻擊者如果攻擊你的頁(yè)面，就只會(huì)導(dǎo)致某個(gè)用戶(hù)的頁(yè)面被黑，其他用戶(hù)的頁(yè)面還是使用正常的，只有一個(gè)用戶(hù)受影響?；蛘呤悄撑_(tái)服務(wù)器上的頁(yè)面被黑，其他服務(wù)器上的頁(yè)面是正常的，只有某一部分用戶(hù)受影響。

但是如果攻擊者攻擊你的服務(wù)器，那么，絕大多數(shù)乃至全部用戶(hù)都會(huì)受影響，這種風(fēng)險(xiǎn)是很大的，所以，我們需要隱藏掉后臺(tái)服務(wù)的地址。

1、更改config.js中的baseUrl，將http://192.168.1.xxx:xxx更改為后端api的公共路徑，例如：

• 登錄接口：/base/login
• 注冊(cè)接口：/base/register

那么 這個(gè)baseUrl就為 /base，后面你訪問(wèn)后端，就只需要使用/login，/register就行，如果后端更改公共路徑，你也可以直接在config.js上修改，就不需要每個(gè)api都去改了

2、在nginx的配置文件中再加一段

location /base/{
     proxy_pass http://172.168.xxx.xxxx:xxxx/base/;# 如果沒(méi)有公共路徑，這一部將無(wú)法配置
     proxy_set_header Host $http_host;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_set_header X-Forwarded-Proto $scheme;  
     # 上面這三個(gè)屬性是為了告訴后端，你前端使用的ip地址
}

然后就可以安全的發(fā)布啦

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。