nginx+vite項(xiàng)目打包以及部署的詳細(xì)過程
項(xiàng)目打包及部署到服務(wù)器二級路由
例如：我希望將打包的項(xiàng)目部署到 http://localhost:8088/web/ 上
一. 項(xiàng)目配置及打包
項(xiàng)目部署到服務(wù)器二級路由需要配置基礎(chǔ)路徑base，即需要：
1.配置vite.config.ts中的基礎(chǔ)路徑
2.配置路由的基礎(chǔ)路徑
方式一 通過環(huán)境變量配置基礎(chǔ)路徑
分別在production和development模式下的環(huán)境變量中添加基礎(chǔ)路徑變量，生產(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
方式二 通過打包時(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 {
#二級路由時(shí)需要使用別名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基礎(chǔ)路徑指令配置原理
在vite當(dāng)中，官方提供了一些內(nèi)置環(huán)境變量，其中就包括BASE_URL，該值默認(rèn)為/，在項(xiàng)目文件中，必須通過import.meta.env.xxx的方式調(diào)用環(huán)境變量，此處為import.meta.env.BASE_URL，之后，vite會將import.meta.env.BASE_URL替換為內(nèi)置的BASE_URL的值，并可以通過指令：--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è)--，使用起來不太方便，于是改進(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用vue-router設(shè)置每個(gè)頁面的title方法
下面小編就為大家分享一篇使用vue-router設(shè)置每個(gè)頁面的title方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
快速修改antd?vue單個(gè)組件的默認(rèn)樣式
這篇文章主要介紹了快速修改antd?vue單個(gè)組件的默認(rèn)樣式方式，具有很好的參考價(jià)值，希望對大家有所幫助。2022-08-08
今天我們稍微說一下 vue3 項(xiàng)目中的 hooks 的使用，其實(shí)這個(gè) hooks 呢是和 vue2 當(dāng)中的 mixin 是類似的，學(xué)習(xí)過 vue2 的小伙伴一定對 mixin 一定比較熟悉，快跟隨小編一起來學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue3父子組件通信、兄弟組件實(shí)時(shí)通信方式
這篇文章主要介紹了vue3父子組件通信、兄弟組件實(shí)時(shí)通信方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue事件處理原理及過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-10-10
詳解vue-cli項(xiàng)目中的proxyTable跨域問題小結(jié)
這篇文章主要介紹了詳解vue-cli項(xiàng)目中的proxyTable跨域問題小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細(xì)介紹了Vue導(dǎo)出頁面為PDF格式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要為大家詳細(xì)介紹了介紹了Vue中跨標(biāo)簽通信的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
vue init webpack 建vue項(xiàng)目報(bào)錯(cuò)的解決方法
今天小編就為大家分享一篇vue init webpack 建vue項(xiàng)目報(bào)錯(cuò)的解決方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue+element實(shí)現(xiàn)表格新增、編輯、刪除功能
這篇文章主要為大家詳細(xì)介紹了vue+element實(shí)現(xiàn)表格新增、編輯、刪除功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05