一、Vue打包

1、配置vue.config.js文件

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

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

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

config.js文件的內容

var ipConfig = {
    baseUrl: 'http://192.168.1.xxx:xxx'   //后端請求地址
  }

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

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

比如我這里，將axios請求封裝起來，每次請求都使用這個封裝的axios

如果你沒有封裝請求，可以在每個請求地址前都加上window.ipConfig.baseUrl

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

4、打包

使用命令：

npm run build

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

5、打包后的文件結構如下

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

1、將打包后的dist文件夾放到服務器的某個文件下

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

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

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

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

打開ngnix配置文件，寫入

 server {
        listen       8099;    //端口，別人通過什么端口來訪問你的前端頁面
        server_name  localhost;  //填localhost就行，服務的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重新加載配置文件

退出寫模式后，運行命令（否則該配置文件不生效）

ngnix reload

三、訪問頁面

接下來，就可以愉快的訪問你的頁面啦

地址 服務器地址+你在ngnix中設置的端口

四、更新

注意：如果你的后端沒有使用到一個公共的路徑，那么第四步（更新）可以不看 ，因為nginx無法配置

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

攻擊者如果攻擊你的頁面，就只會導致某個用戶的頁面被黑，其他用戶的頁面還是使用正常的，只有一個用戶受影響。或者是某臺服務器上的頁面被黑，其他服務器上的頁面是正常的，只有某一部分用戶受影響。

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

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

• 登錄接口：/base/login
• 注冊接口：/base/register

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

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

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

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

總結

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

最新評論