文章詳情頁
nginx部署vue項目,給訪問路徑加前綴的實現
瀏覽:220日期:2023-03-13 15:37:53
目錄
- Nginx安裝與啟動
- Vue增加訪問路徑
- nginx配置
- 總結
Nginx安裝與啟動
去官網下載nginx壓縮包,解壓到電腦合適位置,我這放在D盤,目錄是D:\nginx-1.21.6,
在這個路徑,直接輸入cmd,打開命令行,啟動命令:
nginx.exe
或者
start nginx
關閉命令
taskkill /f /t /im nginx.exe
改了配置文件,不需要先關閉再啟動,直接重啟,重啟命令
nginx -s reload
Vue增加訪問路徑
有時候會根據需要,區分不用的vue項目,這樣要加一個前綴,不加前綴,訪問是http://localhost:8080/
,加一個前綴,cancer,訪問路徑就是http://localhost:8080/cancer
這個路徑,在router/index.js修改配置,增加一個base
const router = new VueRouter({ routes: routes.concat(asyncRouterMap), base: window.publicPath ? window.publicPath + "/" : "", mode: process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test" ? "history" : "hash",});
window.publicPath就是需要的前綴,window.publicPath = “/cancer”;
然后npm run build打包,把打包后的文件,在nignx路徑下html文件夾下,新建一個文件夾,cancer,把包里的內容放進去
nginx配置
server { #前端啟動端口監聽listen 8780;#本機ip,也可以是域名server_name 192.168.2.87; location / { root html; index index.html index.htm;} location /cancer { alias html/cancer; index index.html index.htm; try_files $uri $uri/ /cancer/index.html;}
總結
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持。
標簽:
Nginx
相關文章:
排行榜