文章目錄
- 前言
- 啟動nginx服務
- 部署Vue專案
- 1 部署到根目錄
- 1）vue配置
- 2）nginx配置及部署
- 3）路由模式及地址匹配
- history模式
- hash模式
- 2 部署到子目錄
- 1) vue配置
- 2）nginx配置
前言
nginx是一個高性能的HTTP和反向代理web服務器，作為Web服務器，nginx處理靜態檔案、索引檔案以及自動索引效率非常高，
啟動nginx服務
start nginx
瀏覽器中輸入： localhost:80
說明服務起來了，
部署Vue專案
下面的示例，前端Vue專案使用Vue CLI3創建
1 部署到根目錄
1）vue配置
- 路由模式： history，（hash模式也可以）
- publicPath ‘./’
完了npm run build進行打包，
2）nginx配置及部署
-
修改nginx.conf
location / { root app; #專案檔案位置 index index.html; try_files $uri $uri/ /index.html; }
完了重啟nginx服務
nginx -s reload
3）路由模式及地址匹配
vue專案中有兩個頁面，主頁和about頁面，
history模式
-
/ 匹配 localhost:8010
-
/about 匹配 localhost:8010/about
hash模式
- / -> http://localhost:8010/#/
- /about -> http://localhost:8010/#/about
2 部署到子目錄
也就是通過 localhost:8010/子目錄/xx 訪問專案，
這個也是要在Vue和Nginx中分別配置，
子目錄名以 gis 為例：
1) vue配置
- 路由base屬性：
const router = new VueRouter({
routes,
mode: 'history',
base: '/gis/'
})
- vue.config.js
module.exports = {
publicPath: '/gis/',
.....
}
配置完后，重新打包，
這個在Vue CLI檔案中也有說明，
2）nginx配置
可以在nginx中新建目錄gis，將上面配置后的打包結果（dist目錄內的內容）復制進去，你也可以放到任意目錄，看個人習慣，
location / {
root app; #專案檔案位置
index index.html;
try_files $uri $uri/ /index.html;
}
# 子目錄
location ^~/gis {
alias gis; #專案檔案位置
index index.html;
try_files $uri $uri/ /gis/index.html;
}
完成后，重啟nginx服務
nginx -s reload
參考：
1.nginx百度百科
2.Vue CLI配置參考
3.Vue Router后端配置例子
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/292177.html
標籤：其他
上一篇：wos新版wss協議采集案例