nginx+vite項(xiàng)目打包以及部署的詳細(xì)過(guò)程
項(xiàng)目打包及部署到服務(wù)器二級(jí)路由
例如：我希望將打包的項(xiàng)目部署到 http://localhost:8088/web/ 上
一. 項(xiàng)目配置及打包
項(xiàng)目部署到服務(wù)器二級(jí)路由需要配置基礎(chǔ)路徑base，即需要：
1.配置vite.config.ts中的基礎(chǔ)路徑
2.配置路由的基礎(chǔ)路徑
方式一 通過(guò)環(huán)境變量配置基礎(chǔ)路徑
分別在production和development模式下的環(huán)境變量中添加基礎(chǔ)路徑變量，生產(chǎn)環(huán)境：.env.production文件，開(kāi)發(fā)環(huán)境：.env.development文件
##生產(chǎn)環(huán)境 NODE_ENV='production' VITE_BASE_PATH=/web/
##開(kāi)發(fā)環(huán)境 NODE_ENV='development' VITE_BASE_PATH='/'
vite.config.ts
在配置中添加：
export default ({ mode }: ConfigEnv): UserConfig => {
// 獲取 .env 環(huán)境配置文件
const env = loadEnv(mode, process.cwd());
return {
base: env.VITE_BASE_PATH,
...
}
}
router/index.ts
const router = createRouter({
history: createWebHistory(import.meta.env.VITE_BASE_PATH),
routes
})
package.json
"scripts": {
"dev": "vite serve --mode development",
"build:prod": "vue-tsc --noEmit && vite build --mode production"
}
打包：
npm run build:prod
方式二 通過(guò)打包時(shí)的指令配置基礎(chǔ)路徑
不用配置環(huán)境變量，vite.config.ts不用配置base屬性，只需要在router/index.ts中添加：
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes
})
import.meta.env.BASE_URL為vite內(nèi)置
package.json
"scripts": {
"dev": "vite serve --mode development",
"dev:base": "vite serve --mode development --base",
"build:prod": "vue-tsc --noEmit && vite build --mode production"
"build:base": "vue-tsc --noEmit && vite build --mode production --base",
}
打包：
npm run build:base --base /web/
二. nginx配置及部署
server {
listen 8088;
server_name localhost;
location /web {
#二級(jí)路由時(shí)需要使用別名alias，不用root
alias html/dist/;
index index.html;
#若不配置try_files，刷新會(huì)404
try_files $uri $uri/ /web/index.html;
}
#后臺(tái)接口
location /prod-api/ {
proxy_pass http://172.16.20.30:9905/;
}
}
Vite基礎(chǔ)路徑指令配置原理
在vite當(dāng)中，官方提供了一些內(nèi)置環(huán)境變量，其中就包括BASE_URL，該值默認(rèn)為/，在項(xiàng)目文件中，必須通過(guò)import.meta.env.xxx的方式調(diào)用環(huán)境變量，此處為import.meta.env.BASE_URL，之后，vite會(huì)將import.meta.env.BASE_URL替換為內(nèi)置的BASE_URL的值，并可以通過(guò)指令：--base <path>設(shè)置BASE_URL的值
使用npm運(yùn)行腳本時(shí)可以傳遞參數(shù)，在package.json中添加指令：
demo: vite build --mode production
運(yùn)行npm run demo時(shí)等同于vite build --mode production
運(yùn)行npm run demo -- --base /web/時(shí)等同于vite build --mode production --base /web/
但是-- --有兩個(gè)--，使用起來(lái)不太方便，于是改進(jìn)一下指令：
demo: vite build --mode production --base
運(yùn)行npm run demo --base /web/時(shí)等同于vite build --mode production --base /web/
總結(jié)
到此這篇關(guān)于nginx+vite項(xiàng)目打包以及部署的文章就介紹到這了,更多相關(guān)nginx vite項(xiàng)目打包及部署內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解elementUI中input框無(wú)法輸入的問(wèn)題
這篇文章主要介紹了詳解elementUI中input框無(wú)法輸入的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue3中的defineExpose函數(shù)用法深入解析
這篇文章主要介紹了Vue3中的defineExpose函數(shù)用法的相關(guān)資料,defineExpose是Vue3中用于在模式下暴露組件內(nèi)部屬性和方法的輔助函數(shù),它允許父組件通過(guò)ref訪問(wèn)子組件的暴露內(nèi)容,提高組件間的交互能力并保持封裝性,需要的朋友可以參考下2025-01-01
在本篇文章里小編給大家整理的是一篇關(guān)于vue中進(jìn)行微博分享的實(shí)例內(nèi)容，有需要的朋友們可以參考下。2019-10-10
這篇文章主要介紹了vue中使用vue-pdf的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片上傳到后臺(tái)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
vue-cli2.x舊版本卸載不掉的問(wèn)題踩坑指南(附Vue腳手架安裝教程)
遇到一個(gè)Vuecli2腳手架卸載不了的問(wèn)題,查了許多資料說(shuō)的都比較復(fù)雜,所以下面這篇文章主要給大家介紹了關(guān)于vue-cli2.x舊版本卸載不掉的問(wèn)題踩坑的相關(guān)資料,文中還附了Vue腳手架安裝教程,需要的朋友可以參考下2022-07-07
vue如何修改el-form-item中的label樣式修改問(wèn)題
這篇文章主要介紹了vue如何修改el-form-item中的label樣式修改問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue3中defineComponent?的作用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
elementUI實(shí)現(xiàn)級(jí)聯(lián)選擇器
這篇文章主要為大家詳細(xì)介紹了elementUI實(shí)現(xiàn)級(jí)聯(lián)選擇器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
如何利用vue3實(shí)現(xiàn)一個(gè)俄羅斯方塊
俄羅斯方塊這個(gè)游戲相信大家都玩過(guò),下面這篇文章主要給大家介紹了關(guān)于如何利用vue3實(shí)現(xiàn)一個(gè)俄羅斯方塊的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01