Vue 應用 nginx 配置 前后端不分離模式

一、先在官網下載nginx 軟件，解壓后放在軟件盤中如D盤

將nginx 文件夾拖到編譯器中，打開conf 文件夾中的 nginx.conf 文件，找到其中的server {} 配置項，默認35 行。將默認的 server 配置全部用 # 注釋掉，之后再 conf 文件夾中創建文件夾 conf.d ，創建文件 test.conf，在該文件中進行server {} 配置項的 配置。

 

 

二、配置server 

配置之前需要在 nginx.conf 文件中的 http {} 配置項里加上 include D:/nginx-1.14.1/conf/conf.d/*.conf; 進行文件的映射，加上后才可以找到我們在 conf.d 問件中創建的 .conf 問件，而且是所有的 .conf 文件。如果有多個 .conf 文件則會一起啟動，而只想讓其中一個啟動可以將 * 號改為那個文件的文件名。

 

server配置：

 

listen 8999;　　是配置的端口號

server_name localhost;　　是配置的域名

root D:/nginx-root;　　是配置的資源路徑

autoindex on;　　是配置的打開頁面是否能進入文件列表頁，on為能進入，off 為不能進入

charset utf-8;　　是編碼格式

 

如果不配置autoindex on; 且你的 root 目錄下沒有東西，服務啟動后可能會報 403 Forbidden 錯誤，這時加上這個配置就能避免這個錯誤。

 

在nginx.exe 所在文件夾里，上圖的 nginx-1.14.1文件夾中，進入命令窗口，輸入 start nginx 啟動 nginx 出現以下界面則nginx 啟動成功。

 下圖是 成功進入列表頁的顯示

 

配置以上這些后少不了要配置反向代理，反向代理到 json-server啟動的 mock 數據的服務上，配置方法如下

location /api {

　　proxy_pass http://localhost:8085;

}

 

可以配置多個反向代理

 

 

在輸入地址后，一般會想讓頁面進入首頁而不是列表頁，這是要進行配置，本應用是Vue 的，所以從Vue 官網上拿到如下配置，並進行改進：

location / {

　　try_files $uri $uri/dist /dist/index.html;

}

其中默認配置第二個 $uri 后是沒有 /dist的，后面也沒 /dist 是 

try_files $uri $uri /index.html; 。

加上的原因是之后的資源不是直接放在 D:/nginx-root 目錄下的，而是在其中的 dist 文件夾中，這是如果是官網的默認配置就會找不到對應的 index.html文件，加上 /dist 后就行了。

 

為什么我們要資源放在 dist 文件夾中，而不是放在 nginx-root 文件目錄下？是應為我們可能在 nginx-root 下放了其他的應用的資源，為了防止混亂所以就放在 nginx-root 下的文件夾 dist 下。

 

 

 

 

三、Vue 應用的小修改

與上面相對應，在給Vue 應用進行 yarn build 之前需要進行修改在 vue.config.js 文件的 module.export 暴露的對象中加上  baseUrl: '/dist/',

還要再路由中，在實例化 VueRouter 的配置中加上 base: '/dist/'，

 

之后直接 yarn build 就行了 ，build 出的文件在所有引用的文件路徑前自動加上 /dist/ 。

 

 四、啟動應用

將 build 好的 dist 文件夾拷貝到 nginx-root 目錄下，在命令窗口輸入start nginx啟動 nginx，在瀏覽器窗口輸入localhost:8999，就進入了我們的應用了。到這就正式完成 Vue.js 項目 前后端不分離模式 nginx 配置。

 

五、nginx 配置中的坑

 在 .conf 文件中進行配置時，一定要記住加上 ; ，不加會報錯；

在放置解壓后的 nginx-1.14.1 文件夾時，目錄時一定不能有中文和空格 ，也會報錯

在判斷 nginx 是否啟動成功時，不止直接去瀏覽器輸入域名和端口號，也可以直接 nginx -s stop 停止nginx 看是否有錯誤，如果什么都沒有顯示，那么恭喜啟動成功了，否則會報錯。

 

 

 

如有錯誤，請各位指正！