Vue項(xiàng)目Nginx子目錄部署(Vite和Vue-CLI)
一、序言
生產(chǎn)環(huán)境中Vue項(xiàng)目我們一般會(huì)部署在域名的子目錄下，在了解如何部署時(shí)我們先了解下Vue構(gòu)建相關(guān)的基礎(chǔ)知識(shí)。
首先Vue項(xiàng)目打包后其實(shí)就是個(gè)單頁應(yīng)用，這也是為什么第一次加載時(shí)會(huì)比較慢。
既然是單頁應(yīng)用，如果想在Nginx中指定前綴訪問靜態(tài)資源和文件，需要在打包構(gòu)建時(shí)配置base路徑，目前Vue使用的構(gòu)建工具有Vite(針對(duì)Vue3)還有Vue CLI(基于Webpack，針對(duì)Vue2)。
同時(shí)Vue-Router實(shí)例化時(shí)如果歷史記錄模式為HTML5模式，也需要指定路由的base路徑，不然資源會(huì)訪問失敗。
二、構(gòu)建工具配置
1、Vite打包配置
Vite目前是Vu3主流構(gòu)建工具，打包配置我們可以在vite.config.js中進(jìn)行修改，指定base配置即可，這里我們指定了base為/easy-wealth/，也就是說所有的靜態(tài)資源都會(huì)帶上該前綴。
import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
import legacy from '@vitejs/plugin-legacy';
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
base: '/easy-wealth/',
plugins: [
vue(),
legacy({
targets: ['defaults', 'not IE 11'],
})
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
}
});
2、Vue CLI打包配置
Vue CLI目前已經(jīng)處于維護(hù)狀態(tài)，一般老項(xiàng)目可能還在用它來開發(fā)，Vue CLI打包時(shí)基于Webpack構(gòu)建。通過vue.config.js我們可以通過publicPath選項(xiàng)指定靜態(tài)資源的訪問前綴，配置如下：
module.exports = {
publicPath: '/easy-wealth/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV !== 'production'
}
通過上述配置，打包后我們會(huì)發(fā)現(xiàn)index.html文件里所有的靜態(tài)資源訪問路徑前都加上了/easy-wealth前綴。
三、Vue-Router配置
目前Vue-Router支持3種歷史記錄模式，分別是Hash模式、Memory模式和HTML5模式。如果我們指定歷史記錄模式為HTML5模式，那么一定要指定路由的base路徑，不然頁面訪問會(huì)出現(xiàn)404。
const router = createRouter({
history: createWebHistory('/easy-wealth/'),
routes
});
export default router;
四、Nginx配置
在Nginx配置中，我們加了一項(xiàng)try_files回退路由配置，前面已經(jīng)說過Vue項(xiàng)目是單頁面應(yīng)用，這項(xiàng)配置看起來有點(diǎn)復(fù)雜，但也容易理解，舉個(gè)例子：
當(dāng)訪問http://test.com/easy-wealth/hwc時(shí)，Nginx首先會(huì)去h5/easy-wealth/dist目錄下找名為hwc的目錄，以及該目錄下的文件，如果都沒有找到，則回退訪問/easy-wealth/index.html，這時(shí)Nginx會(huì)在h5/easy-wealth/dist下找到名為index.html的文件。
location /easy-wealth {
alias h5/easy-wealth/dist;
try_files $uri $uri/ /easy-wealth/index.html;
}到此這篇關(guān)于Vue項(xiàng)目Nginx子目錄部署(Vite和Vue-CLI)的文章就介紹到這了,更多相關(guān)Vue Nginx子目錄部署內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- nginx找到默認(rèn)根目錄(root?html)的方法
- nginx如何配置vue項(xiàng)目history的路由模式(非根目錄)
- 通過nginx實(shí)現(xiàn)訪問服務(wù)器指定目錄下圖片資源
- nginx 不同的訪問路徑對(duì)應(yīng)項(xiàng)目不同的目錄的實(shí)現(xiàn)方法
- nginx設(shè)置資源請(qǐng)求目錄的方式詳解
- Nginx安裝完成沒有生成sbin目錄的解決方法
- Nginx本地目錄映射實(shí)現(xiàn)代碼實(shí)例
- nginx用正則表達(dá)式實(shí)現(xiàn)泛域名自動(dòng)匹配目錄的方法
- 深入理解Nginx中的sites-enabled目錄
相關(guān)文章
vue結(jié)合leaflet實(shí)現(xiàn)鷹眼圖
本文主要介紹了vue結(jié)合leaflet實(shí)現(xiàn)鷹眼圖，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
Vue router的addRoute方法實(shí)現(xiàn)控制權(quán)限方法詳解
這篇文章主要介紹了vue動(dòng)態(tài)路由添加，vue-router的addRoute方法實(shí)現(xiàn)權(quán)限控制流程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-09-09
Vue使用Element-UI生成并展示表頭序號(hào)的方法
序號(hào)算是在展示數(shù)據(jù)的時(shí)候，一種很普遍的屬性了，我們可以自己寫生成序號(hào)的規(guī)則，也可以借助第三方，這篇文章主要介紹了Vue使用Element-UI生成并展示表頭序號(hào)的方法,需要的朋友可以參考下2023-01-01
HBuilder導(dǎo)入vue項(xiàng)目并通過域名訪問的過程詳解
這篇文章主要介紹了HBuilder導(dǎo)入vue項(xiàng)目并通過域名訪問,一般情況下運(yùn)行vue項(xiàng)目需要安裝node.js，通過npm命令來安裝vue組件和運(yùn)行vue項(xiàng)目，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue中l(wèi)et that=this的作用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue 大文件上傳和斷點(diǎn)續(xù)傳的實(shí)現(xiàn)
文件上傳在很多項(xiàng)目中都用的到，如果是幾M的很快就傳送完畢，如果是大文件呢？本文就介紹了Vue 大文件上傳和斷點(diǎn)續(xù)傳的實(shí)現(xiàn)，感興趣的可以了解一下2021-06-06
微信小程序Webview與H5通信的思路與實(shí)戰(zhàn)記錄
這篇文章主要介紹了微信小程序Webview與H5通信的思路與實(shí)戰(zhàn)的相關(guān)資料,由于微信小程序與H5之間的通信限制,無法滿足業(yè)務(wù)需求,通過動(dòng)態(tài)改變url的hash值來傳遞參數(shù),并利用vue-router組件的路由守衛(wèi)來避免頁面刷新,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了vue單元格多列合并的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
element tree懶加載:load="loadNode"只觸發(fā)一次的解決方案
本文主要介紹了element tree懶加載:load="loadNode"只觸發(fā)一次的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
詳解vue-router 動(dòng)態(tài)路由下子頁面多頁共活的解決方案
這篇文章主要介紹了vue-router 動(dòng)態(tài)路由下子頁面多頁共活的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12