一、序言

生產(chǎn)環(huán)境中Vue項(xiàng)目我們一般會(huì)部署在域名的子目錄下，在了解如何部署時(shí)我們先了解下Vue構(gòu)建相關(guān)的基礎(chǔ)知識。

首先Vue項(xiàng)目打包后其實(shí)就是個(gè)單頁應(yīng)用，這也是為什么第一次加載時(shí)會(huì)比較慢。

既然是單頁應(yīng)用，如果想在Nginx中指定前綴訪問靜態(tài)資源和文件，需要在打包構(gòu)建時(shí)配置base路徑，目前Vue使用的構(gòu)建工具有Vite(針對Vue3)還有Vue CLI(基于Webpack，針對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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！ 

最新評論