溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Angular項目路徑如何添加指定的訪問前綴的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Angular項目路徑如何添加指定的訪問前綴文章都會有所收獲，下面我們一起來看看吧。
開發多個項目的時候，我們希望能通過指定的前綴路徑去訪問不同的項目。比如，通過前綴 /projectA/ 去訪問項目 A；通過前綴 /projectB/ 去訪問項目 B。我們應該怎么設置呢？
這里使用的框架是 Angular，"@angular/core": "~12.1.0"
假設我們添加的前綴為 /jimmy/
1. 更改路由前綴
在 app.module.ts 文件中添加 APP_BASE_HREF：
import { APP_BASE_HREF } from '@angular/common';
@NgModule({
providers: [
{
provide: APP_BASE_HREF,
useValue: "/jimmy/"
}
]
})2. 更改打包的文件
這一步非必需，我們這里只是統一一下名稱為 jimmy 而已
更改 angular.json 的輸出文件：
{
"projects": {
...
{
"outputPath": "jimmy"
}
}
}3. 更改掛載文件的 base href
默認情況下，掛載的文件 index.html 一般長這樣：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Jimmy</title> <base href="/" rel="external nofollow" > <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="logo.png" rel="external nofollow" > </head> <body> <app-root></app-root> </body> </html>
我們是要將 <base href="/"> 變成 <base href="/jimmy/">。但是，我們不能手動更改掛載文件。因為只要構建后的文件更改即可，所以我們可以在 package.json 文件中完成這一步。只需要添加 --base-href=/jimmy/ 即可，如下：
"scripts": {
"build": "ng build --base-href=/jimmy/"
}運行 npm run build 打包后得到的文件夾 jimmy 下的 index.html 文件中的 base 標簽自然會更改。
至此，我們已經更改完了訪問的項目前綴，那么我們要部署到服務器上進行訪問，是要怎么做呢？
這里假設我已經將打包后的 jimmy 資源上傳到了服務器，并且用 nginx 作為代理。
本項目是個 SPA 項目。MPA 項目的講解會放在下一篇文章，相關項目使用技術是 next.js ，敬請期待
這里，我們需要更改 nginx.config 中的 server 字段:
server {
listen 80 default_server;
root /usr/share/nginx/fe/; // 打包的文件存放的位置
location /jimmy/ {
index index.html index.htm;
try_files $uri $uri/ /jimmy/index.html;
}
}執行 nginx -s reload 使得配置生效。通過 http://domain.com/jimmy/index.html 就可以訪問到項目 jimmy 了。
關于“Angular項目路徑如何添加指定的訪問前綴”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Angular項目路徑如何添加指定的訪問前綴”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
