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

目錄

• 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;}

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持。