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