如果你想把你用Vite構建的項目部署到服務器的二級路由上，比如 http://demo.dev/admin/?，你需要注意以下幾個步驟：

一. 配置基礎路徑base

基礎路徑base是指你的項目在服務器上的相對路徑，比如你的項目部署在?http://demo.dev/admin/?上，那么你的基礎路徑就是 /admin/ 。你需要在兩個地方配置基礎路徑：

1. 配置 vite.config.ts 中的 base 屬性。這個屬性會影響你的靜態(tài)資源的引用路徑，比如圖片，樣式，腳本等。你可以在 vite.config.ts 中直接寫死 base 的值，也可以通過環(huán)境變量來動態(tài)設置。
2. 配置路由的 history 模式。這個模式會影響你的路由路徑，比如你訪問?http://demo.dev/admin/login?，那么你需要在路由中指定基礎路徑為 /admin/ ，否則會出現(xiàn) 404 錯誤。你可以在 router/index.ts 中使用 import.meta.env.BASE_URL 來獲取vite.config.ts 中 設置的 base 值。

通過環(huán)境變量配置基礎路徑

分別在production和development模式下的環(huán)境變量中添加基礎路徑變量，生產環(huán)境：.env.production文件，開發(fā)環(huán)境：.env.development文件

#生產環(huán)境
VITE_BASE_PATH=/admin/

##開發(fā)環(huán)境
VITE_BASE_PATH='/'

vite.config.ts

在配置中添加：

# 函數(shù)式寫法
export default ({ mode }: ConfigEnv): UserConfig => {
  // 獲取 .env 環(huán)境配置文件
  const env = loadEnv(mode, process.cwd());
  return {
    base: env.VITE_BASE_PATH,
    ...
  }
}

# 或
import dotenv from 'dotenv';

dotenv.config({ path: `.env.${process.env.NODE_ENV}` });
export default defineConfig({
  base: process.env.VITE_BASE_PATH,
})

router/index.ts

const router = createRouter({
  history: createWebHistory(import.meta.env.VITE_BASE_PATH),
  routes
})

package.json

"scripts": {
    "dev": "NODE_ENV=development vite",
    "preview": "vite preview",
    "build": "vite build",
}


# 函數(shù)式配置vite.config.ts
# "scripts": {
#   "dev": "vite serve --mode development",
#   "build:prod": "vue-tsc --noEmit && vite build --mode production"
# }

打包：

npm run build

二. nginx配置及部署

nginx是一個高性能的HTTP和反向代理服務器，可以用來部署你的Vite項目。你需要在nginx的配置文件中添加以下內容：

server {
  listen       80;
  server_name  demo.dev;

  location /admin {
    #二級路由時需要使用別名alias，不用root
    alias html/dist/;
    index  index.html;
    #若不配置try_files，刷新會404
    try_files $uri $uri/ /admin/index.html;
  }

  #后臺接口
  location /api/ {
    proxy_pass http://api.demo.dev/;
  }
}

這里解釋一下幾個關鍵的配置項：

• listen：指定監(jiān)聽的端口號，這里是80，你可以根據(jù)你的實際情況修改。
• server_name：指定服務器的域名，這里是demo.dev，也可以修改為你的域名。
• location /admin：指定二級路由的路徑，這里是/admin，要和你的項目基礎路徑保持一致。
• alias html/dist/：指定二級路由對應的項目目錄，這里是html/dist/，也就是你打包后生成的dist文件夾，要放在nginx的html目錄下。
• try_files $uri $uri/ /web/index.html：指定當請求的資源不存在時，重定向到/admin/index.html，這樣可以避免刷新頁面時出現(xiàn)404錯誤。
• location /api/：指定后臺接口的路徑，這里是/api/，要和你的項目中請求后臺接口的路徑保持一致。
• proxy_pass?http://api.demo.dev/：指定后臺接口對應的真實地址，這里是http://api.demo.dev/，要根據(jù)你的實際情況修改。

配置好nginx后，重啟nginx服務，然后就可以在瀏覽器中訪問?
http://demo.dev/admin/
?查看你的項目了。

Vite基礎路徑指令配置原理

在vite當中，官方提供了一些內置環(huán)境變量，其中就包括 BASE_URL，該值默認為 /，在項目文件中，必須通過 import.meta.env.xxx 的方式調用環(huán)境變量，此處為 import.meta.env.BASE_URL，之后，vite會將 import.meta.env.BASE_URL 替換為內置的BASE_URL的值，并可以通過指令：--base?設置BASE_URL的值

使用npm運行腳本時可以傳遞參數(shù)，在package.json中添加指令：

demo: vite build --mode production

運行npm run demo時等同于vite build --mode production
運行npm run demo -- --base /admin/時等同于vite build --mode production --base /admin/

但是-- --有兩個--，使用起來不太方便，于是改進一下指令：

demo: vite build --mode production --base

運行npm run demo --base /admin/時等同于vite build --mode production --base /admin/

轉載：如何使用Vite打包和部署項目到服務器二級路由 - 初心文章來源地址http://www.zghlxwxcb.cn/news/detail-762623.html

到了這里，關于如何使用Vite打包和部署項目到服務器二級路由的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！