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