nginx部署vue項(xiàng)目,給訪問路徑加前綴的實(shí)現(xiàn)
目錄
- Nginx安裝與啟動(dòng)
- Vue增加訪問路徑
- nginx配置
- 總結(jié)
Nginx安裝與啟動(dòng)
去官網(wǎng)下載nginx壓縮包,解壓到電腦合適位置,我這放在D盤,目錄是D:\nginx-1.21.6,
在這個(gè)路徑,直接輸入cmd,打開命令行,啟動(dòng)命令:
nginx.exe
或者
start nginx
關(guān)閉命令
taskkill /f /t /im nginx.exe
改了配置文件,不需要先關(guān)閉再啟動(dòng),直接重啟,重啟命令
nginx -s reload
Vue增加訪問路徑
有時(shí)候會(huì)根據(jù)需要,區(qū)分不用的vue項(xiàng)目,這樣要加一個(gè)前綴,不加前綴,訪問是http://localhost:8080/
,加一個(gè)前綴,cancer,訪問路徑就是http://localhost:8080/cancer
這個(gè)路徑,在router/index.js修改配置,增加一個(gè)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文件夾下,新建一個(gè)文件夾,cancer,把包里的內(nèi)容放進(jìn)去
nginx配置
server { #前端啟動(dòng)端口監(jiān)聽listen 8780;#本機(jī)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;}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持。
相關(guān)文章:
