當前位置：首頁 > server > anz > 詳細頁面

nginx部署vue項目,給訪問路徑加前綴的實現

時間：2022-12-10來源：www.djmaza-info.com作者：電腦系統城

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

1
2
3
4
5
6
7
8 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配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14 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;
}